Tooltip

son gohan

son gohan

Erfahrenes Mitglied
Hallo,

kann mir jemand sagen warum dieser Tooltip von mir zwar die Farbe vom Container wechselt, die Positionierungsverschiebung aber nicht funktioniert?


Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><title>CSS Test</title>

<style type="text/css">

a.rot         .grun,
a.rot:link    .grun,
a.rot:visited .grun{
display:block;
width:60px;
height:60px;
background:#00FF00;
position:absolute;
left:100px;
}
a.rot:hover  .grun {background:#fff;width:60px;height:60px;left:208px;}
a.rot:active .grun {background:#fff;width:60px;height:60px;left:208px;}
a.rot:focus  .grun {background:#fff;width:60px;height:60px;left:208px;}

</style>
</head>
<body>



<div style="width:200px;height:200px;background:#FFFF00;position:relative">

<div style="width:40px;height:40px;position:absolute;border:6px solid #ffff00;background:#FF0000;"><a class="rot" href="#">Link<span class="grun">Tolltip</span></a></div>

</div>



</body>
</html>
 
Maik hat gesagt.:
linke Startposition (208px).
Zum Vergrößern anklicken....


Hi,

danke für dein Test.

Warum sagst du "linke Startposition (208px)" der grüne Kasten soll doch erst beim über den Link fahren auf 208px nach rechts stehen werden und am "Start" 100px.

Bei mir klappt es nicht, wenn ich über Link fahre wechselt sich nur die Hintergrundfarbe aber der kasten verschiebt sich nicht.

Verschiebt sich den der Kasten bei dir?

Besten Dank.
 
left (Startposition von links), um hier Licht ins Dunkel zu bringen, was ich unter der "Startposition" verstehe.

Abgesehen vom IE verschiebt sich bei mir in den übrigen Browsern (FF, Mozilla, NN, Opera, Safari, Seamonkey) die Box beim Überfahren des Links.

mfg Maik
 
Ich hab da was für dich :)

CSS: 
a.rot:hover { background:none; }

Erfolgreich getestet im IE 5.01, 5.5, 6 und 7.

mfg Maik
 
Hi,

es ist ja immer sehr anstrengend und Sinnlos mit einer wand zu reden, wenn ich mir den Browser nun gerade so betrachte kommt es mir auch so vor als ob ich mit einer Wand rede.

Ich denke ich habe im doch insgesamt mit hilfe des CSS und HTML gesagt was er tun soll.

Hat der IE Browser den auch mit den CSS Angaben "position" Probleme?

Die Hintergrundfarbe wechselt er ja und ich gehe dann mal davon aus das ich den Kontainer zumindest schon mal richtig angesprochen habe.

Fällt dir den auf wieso der IE Browser nicht reagiert?

Also die Startposition funktioniert bei mir auch nicht, ich habe nur für hover die 208px per CSS festgelegt, also wundert es mich immer noch wieso du als Startposition 208 px erwähnst?


Besten Dank.


Code: 
/*--------------------------------------------*/
/*----Nicht mal an Weihnachten oder Ostern ist 208px nach meinen CSS Angaben die Startposition oder doch?--*/
/*---------------------------------------------*/
a.rot         .grun,
a.rot:link    .grun,
a.rot:visited .grun{
display:block;
width:60px;
height:60px;
background:#00FF00;
position:absolute;
left:100px;
}
/*----------------------------------------------------------*/
/*-----hier sind die 208px bei hover usw. also hat in meinen Augen nichts mit start zu tun*/
/*---------------------------------------------------------*/
a.rot:hover  .grun {background:#fff;width:60px;height:60px;left:208px;}
a.rot:active .grun {background:#fff;width:60px;height:60px;left:208px;}
a.rot:focus  .grun {background:#fff;width:60px;height:60px;left:208px;}
 
Maik hat gesagt.:
Ich hab da was für dich :)

CSS: 
Ich hab da was für dich 

a.rot:hover { background:none; }

Erfolgreich getestet im IE 5.01, 5.5, 6 und 7.
Zum Vergrößern anklicken....

Hi,

ich habe mal zwei Fragen dazu, vielen Dank.

-Ich will nicht die Hintergrundfarbe ändern, das funktioniert ja bereits, was ich will ist das der Grüne Kasten sich verschiebt wenn man drüber fährt, per CSS habe ich schon definiert das die Hintergrundfarbe sich ändert und es funktioniert, aber die Angabe left:208px wird nicht erkannt sie steht doch aber im gleichen CSS Block:
CSS: 
a.rot:hover  .grun {background:none;width:60px;height:60px;left:208px;}

-dann wollt ich noch fragen ob du die Internet Explorer Browser alle einzeln installiert hast oder ob du ein programm benutzt das alle Versionen in sich hat?

besten Dank
son gohan der Sohn von son goku Dragon balls spezialist...
 
Du hast meinen Vorschlag nicht 1:1 übernommen, d'rum funktionert es bei dir scheinbar auch nicht.

Der benötigte Selektor lautet a.rot:hover und nicht a.rot:hover .grun.

CSS: 
a.rot:hover { border:none; }

... führt hier zum selben Erfolgserlebnis, dass die komplette IE-Familie beim Überfahren des Links die Box auf left:208px positioniert. Und ja, ich weiß, dass du hier keinen Rahmen setzen oder tauschen willst.

Beide Methoden sind ein "Workaround", damit der CSS-Tooltip im IE reibungslos funktioniert - in deinem Fall die "Positionsverschiebung".

Also, einfach eine der beiden CSS-Regeln in dein Stylesheet einsetzen, und das Problem ist vom Tisch.

@Multiple-IE: Falls es dir entgangen sein sollte, ich habe dir dazu schon gestern Abend in deinem anderen Thema zwei Links genannt.

mfg Maik
 
Hi,

dank deiner vorbildlischen Hilfe konnte ich nun auch dieses CSS Tooltip Verständnißprolem lösen, der Code unten funktioniert, ich habe zwei verschiedene CSS Blöcke geschrieben und konnte durch die Aufteilung das Problem lösen.

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><title>CSS Test</title>

<style type="text/css">
a.rot         ,
a.rot:link    ,
a.rot:visited {
display:block;
width:70px;
height:70px;
background:#FF0000;
position:relative;
}

.grun {
display:block;
width:60px;
height:60px;
background:#00FF00;
position:absolute;
left:-1000px;
}
a.rot:hover .grun{border:none;left:208px;}

</style>
</head>
<body>

<div style="width:200px;height:200px;background:#FFFF00;position:relative">
<div style="width:60px;height:60px;position:absolute;border:6px solid #ffff00;background:#FFFF00;">
<a class="rot" href="#">Link<span class="grun">Tolltip</span></a>
</div>
</div>

</body>
</html>

P.S. a.rot:hover .grun ist stehen geblieben.

Danke für die Hilfe.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück