Autor |
Nachricht |
Greife
Threadersteller
Dabei seit: 24.10.2014
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Fr 24.10.2014 16:03
Titel Mouseover Text |
|
|
Hallo,
ich suche eine Lösung für folgendes Problem:
Ich habe einige Anker-Elemente in der selben Zeile. Beim Mouseover erscheint ein Text, wie bei einem Tooltip. Der Text soll nur bei jedem Tooltip an der selben stelle sein. Über der Zeile, horizontal Zentriert.
Ich habe es bereits hinbekommen, dass der Text direkt beim Anker-Element erscheint, absolut zum Anker.
So soll es aussehen:
_ _ _ _ _ _ _ Hovertext _ _ _ _ _ _ _ _ <-Horizontal zentriert
Eins | Zwei | Drei | Vier | Fünf | Sechs <- Anker
Vielleicht gibt es auch eine Lösung, um den angezeigten Text im HTML-Code außerhalb des Anker-Elements zu platzieren.
Vielen Dank für die Hilfe!
|
|
|
|
|
DEKONSTRUKTIV
Dabei seit: 22.06.2009
Ort: bln
Alter: -
Geschlecht: -
|
Verfasst Fr 24.10.2014 16:07
Titel
|
|
|
und was genau is dein konkretes problem?
|
|
|
|
|
Anzeige
|
|
|
SimonDerDude
Dabei seit: 15.01.2010
Ort: error: undefined
Alter: 35
Geschlecht:
|
Verfasst Fr 24.10.2014 16:21
Titel
|
|
|
Schenk uns ein wenig deines Codes und wir schenken dir ein wenig unserer Aufmerksamkeit.
|
|
|
|
|
Greife
Threadersteller
Dabei seit: 24.10.2014
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Fr 24.10.2014 22:20
Titel
|
|
|
Code: | <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="style.css" />
</head>
<body>
<div class="container">
<p class="top">Der Text soll immer hier stehen.</p>
<p class="class">
<a href="#" class="text">Eins<span>Hier steht ein Text.</span></a> | <a href="#" class="text">Zwei<span>Hier steht ein Text.</span></a> | <a href="#" class="text">Drei<span>Hier steht ein Text.</span></a> | <a href="#" class="text">Vier<span>Hier steht ein Text.</span></a> | <a href="#" class="text">Fuenf<span>Hier steht ein Text.</span></a> | <a href="#" class="text">Sechs<span>Hier steht ein Text.</span></a> | <a href="#" class="text">Sieben<span>Hier steht ein Text.</span></a> | <a href="#" class="text">Acht<span>Hier steht ein Text.</span></a>
</p>
</body>
</html>
|
Code: | *, html, body {margin:0; padding:0;}
html{
}
.container{
background-color: #CCC;
width: 1000px;
height: 500px;
padding: 100px 0 0 0;
}
.class{
margin: 0 auto 0 auto;
text-align: center;
}
.top{
text-align: center;
margin: 0 auto 0 auto;
padding: 50px 0 50px 0;
color: red;
}
a.text {
position: relative;
text-decoration: none;
}
a.text span {display: none;}
a.text:hover span {
display: block;
position: absolute;
content: attr(title);
text-align: center;
left: 50%;
top: -40px;
width: 150px;
}
|
|
|
|
|
|
Greife
Threadersteller
Dabei seit: 24.10.2014
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mo 27.10.2014 15:03
Titel
|
|
|
Bitte nochmal um Hilfe. Bin leider noch nicht weitergekommen.
|
|
|
|
|
tschuingum
Dabei seit: 17.06.2009
Ort: Karlsruhe
Alter: -
Geschlecht: -
|
Verfasst Mo 27.10.2014 16:33
Titel
|
|
|
Über die Semantik würde ich nochmal nachdenken - sieht mir z.B. verdächtig nach einer Liste und nicht nach einem Textabsatz aus. Aber das nur am Rande.
Zur Positionierung: Absolut positionierte Elemente beziehen sich immer auf das nächsthöhere Vorfahrelement, welches nicht static positioniert ist. In deinem Fall also auf die a-Elemente … willst du aber nicht, also entferne die relative Positionierung bei den Links und gebe sie dem Textabsatz.
|
|
|
|
|
|
|
|
Ähnliche Themen |
MouseOver Text
Bei MouseOver Text vergrößern?
[CSS] Bei mouseover zusätzlich Text einblenden
Infotext bei Mouseover über Text
Mouseover erweitert Text/Links CSS(3) oder...?
Suche script für Infotext bei mouseover Bild. Der Text...
|
|