nicht angemeldet
Hover klappt nicht
Hallo,
ich habe in selfhtml gefunden
":link, :visited, :focus, :hover, :active (Pseudoklassen für Verweise und andere Elemente)"
Dies habe ich versucht, aber der Text verschwindet nicht.
Was habe ich falsch gemacht?
<html>
<head>
<title>Test Hover</title>
<style type="text/css">
<!--
div:hover {
display: none;
}
</style>
</head>
<body>
<div>
Textaaaaaaaaaaaa<br>
Textbbbbbbbbbbbb<br>
Textcccccccccccc<br>
Textddddddddddd<br>
</div>
</body>
</html>
-
Mach lieber eine Klasse, statt den Div Tag zu formatieren.
Z.B<div class="hovertest">text</div>hovertest:hover { display:none; }-
Hi,
Mach lieber eine Klasse, statt den Div Tag zu formatieren.
Element, nicht Tag.
hovertest:hover
{
display:none;
}Da fehlt ein .. Außerdem löst es das Problem nicht. Und allgemein zu sagen "nimm ne Klasse" halte ich auch nicht für den richtigen Weg. Auch wenn ich mir nicht vorstellen kann dass das auf tatsächlich auf alle div-Elemente angewendet werden soll. ~dave-
Und allgemein zu sagen "nimm ne Klasse" halte ich auch nicht für den richtigen Weg.
Auch wenn ich mir nicht vorstellen kann dass das auf tatsächlich auf alle div-Elemente angewendet werden soll.Richtig!
Natürlich würde ich, w e n n es funktioniert, dies beschränken.
-
-
-
Hi,
als erstes und ganz wichtig ist dass du ein valides Dokument erstellst.
Der Validator kann dabei helfen.Wenn du mit der Maus also über das div-Element fährst wird dieses ausgeblendet.
Da du jetzt mit der Maus nicht mehr über dem Element bist wird es nicht mehr ausgeblendet, da div:hover ja nicht mehr gegeben ist.Es müsste bei langsamen PC/Browser also eigentlich flackern.
~dave
-
Om nah hoo pez nyeetz, Retty!
Fehlende Doctypedeklaration, dadurch provozierst du den Ratemodus der Browser (quirks)
<html> <head> <title>Test Hover</title> <style type="text/css"> <!--
Beginnender Kommentar. Dadurch sollte einiges ignoriert werden.
div:hover { display: none;
Display: none sorgt dafür, dass das div verschwindet. Was weg ist, kann auch nicht gehovert werden. Das Resultat sollte ein Flackern sein oder, dass es wirkungslos aussieht.
Matthias
--
Wer ein Problem beschreiben kann, hat es schon halb gelöst. (Julian Huxley)
-
Om nah hoo pez nyeetz, Retty!
Fehlende Doctypedeklaration, dadurch provozierst du den Ratemodus der Browser (quirks)
Ursprünglich war dies angegeben. Aber für die Demonstration hier war dies irrelevant.
<html>
<head>
<title>Test Hover</title>
<style type="text/css">
<!--
Beginnender Kommentar. Dadurch sollte einiges ignoriert werden.Nichts wurde ignoriert.
div:hover {
display: none;Display: none sorgt dafür, dass das div verschwindet. Was weg ist, kann auch nicht gehovert werden. Das Resultat sollte ein Flackern sein oder, dass es wirkungslos aussieht.
Richtig.
Nun weiß ich, dass es so nicht geht, aber von niemandem einen Tipp, was ich machen müsste, damit es funktioniert.
Grup
Retty-
Grüße,
was wilslt du erreichen? je genauer und umfassender du es beschreibst um so leicher kann man dir helfen.
MFG
bleicher-
Hi,
was wilslt du erreichen? je genauer und umfassender du es beschreibst um so leicher kann man dir helfen.
Ich wollte beim Überfahren eines Bildes mit umgebendem Text das Bild und den Text austauschen.
Die Beispiele die ich gegoogelt habe, waren mir zu umfangreich, so dass ich sie mit meinen bescheidenen Kenntnissen nicht verstanden habe.
Ich möchte dies daher schrittweise angehen.
Und begonnen habe ich mit der Aufgabe "Text verschwinden lassen bei hover".
Die nächsten Schritte- Bild und Text verschwinden lassen bei hover
- Text bei Hover ersetzen
- Bild und Text bei Hover ersetzen
Gruß
Retty
-
Grüße,
naah - du wilslt text nicht verschwinden lassen - du wilslt ihn unsichtbar machen, zB visibility:hidden und dein zieltext eben auf visible. die müssten allerdings übereinander positioniert sein und hover sollst du am parent abfragen
MFG
bleicher -
Om nah hoo pez nyeetz, Retty!
Die nächsten Schritte
- Bild und Text verschwinden lassen bei hover
- Text bei Hover ersetzen
- Bild und Text bei Hover ersetzen
Grundsätzlich ist step by step eine gute Variante. Hier könnte das vielleicht kontraproduktiv sein. Ich stelle dir eine HTML4.01-Variante vor. Unter Verwendung von HTML5-Elementen könnte das etwas einfacher sein. Ich gehe davon dass sowohl Bild als auch Text auf :hover reagieren sollen. Das Austauschen von Grafiken ist mit CSS eigentlich nicht so richtig möglich. Deshalb verwende ich ein Hintergrundbild. Meist möchte man bei Navigationslisten ein anderes Bild haben.
<div id="mein_div"><span></span></div> könnte die Struktur sein.
#mein_div {background-image url(ungehovertes Bild');} #mein_div span:after {content: 'ungehoverter Text';}
#mein_div:hover {background-image url(gehovertes Bild');} #mein_div:hover span:after {content: 'gehoverter Text';}
Vielleicht gibt es auch passendere Elemente. Zum Beispiel:
<ul id="nav"> <li><a href..></a></li> </ul>
#nav li {background-image url(ungehovertes Bild');} #nav li a:after {content: 'ungehoverter Text';}
#nav li:hover {background-image url(gehovertes Bild');} #nav li:hover a:after {content: 'gehoverter Text';}
wäre zumindest eine Möglichkeit. Schau dich zu den verwendeten Sachen im Wiki um.
- Selektoren
- generierter Inhalt
Matthias
--
Wer ein Problem beschreiben kann, hat es schon halb gelöst. (Julian Huxley)
-
Om nah hoo pez nyeetz, Retty!
Ergänzung: Möglicherweise sind auch CSS-Sprites für dich ein Thema.
Matthias
--
Wer ein Problem beschreiben kann, hat es schon halb gelöst. (Julian Huxley)
-
-
-
