nicht angemeldet
div hover Effekt
0 0 0 0 0 
Gernot Back
0
div hover Effekt
Hallo liebe SELFHTMLler,
ich habe nun die letzten Tage diverse CSS Dinge ausprobiert. Nun habe ich mir nochmals ein neues Layout ausgedacht.
Folgendes:
Ist es möglich den hover Effekt auf ein Div anzuwenden?
Ich hatte mir eigentlich gedacht, das sollte funktionieren.
Das DIV ist margin:0; positioniert, und dabei 30px breit. Beim HOVER über dem DIV soll die Größe auf 200px erhöht werden. Warum? Dann soll die UL die in dem DIV liegt sichtbar werden. Also eigentlich ein verstecktes Menü.
Nur leider funktioniert der HOVER EFfekt auf dem DIV nicht.
Wie sollte man das umsetzten?
Vielen Dank
LG
--
kEv*
----
-
Ist denn diese Lösung eine anständige oder würdet ihr hier etwas anders machen?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>CSS</title> <style type="text/css"> <!-- body{ margin:0 auto; font-family:Georgia, "Times New Roman", Times, serif; font-size:100.01%; color:#996600; } #layer{ width:30px; height:800px; background-color:#CCCCCC; } #layer:hover{ width:200px; height:800px; background-color:#CCCCCC; } #layer ul{ visibility:hidden; } #layer:hover ul{ visibility:visible; } --> </style> </head> <body> <div id="layer"> <ul id="menu"> <li><h2>Kategorie</h2></li> <li>Menulink 1</li> <li>Menulink 1</li> <li>Menulink 1</li> <li>Menulink 1</li> <li>Menulink 1</li> <li><h2>Kategorie</h2></li> <li>Menulink 2</li> <li>Menulink 2</li> <li>Menulink 2</li> <li>Menulink 2</li> <li>Menulink 2</li> </ul> </div> </body> </html>Bin als Neuling im CSS über alle Hinweise und Tips dankbar.
LG
kEv* -
Hallo kEv*.
Ist es möglich den hover Effekt auf ein Div anzuwenden?
Die :hover-Pseudoklasse funktioniert bei (fast) jedem Element.
Nur leider funktioniert der HOVER EFfekt auf dem DIV nicht.
Mir drängt sich der Verdacht auf, dasss du im IE testest. Dieser kann :hover nur auf Links anwenden. Mit der kommenden Version 7 ist dies behoben.
Derzeit bleiben nur Workarounds wie z. B. whatever:hover.Einen schönen Sonntag noch.
Gruß, Ashura
--
sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
„It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
[HTML Design Constraints: Logical Markup]-
Hallo Ashura
ja, ich habe im IE getestet. Im Firefox funktioniert der Effekt. Nur leider ist es doof wenn der IE das erst ab V7 kann. Dann ätten alle die IE<7 benutzen ein Problem mit der Navigation.
Mhh gibt es Möglichkeiten dies über eine Browserweiche zu lösen, oder den Effekt ganz weglassen?
LG
--
kEv*
-----
Hallo kEv*.
Mhh gibt es Möglichkeiten dies über eine Browserweiche zu lösen, oder den Effekt ganz weglassen?
Du wirst auf den Effekt wohl zumindest für derzeitige IEs verzichten müssen.
Zusätzlich solltest du die per visibility vorgenommenen Formatierungen <http://de.selfhtml.org/css/layouts/browserweichen.htm#browserweichen@title=für IEs> wieder zurücksetzen, da in diesen sonst die Navigation unbenutzbar ist.
Einen schönen Sonntag noch.
Gruß, Ashura
--
sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
„It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
[HTML Design Constraints: Logical Markup]-
Ashura,
aber generell ist das umgesetzte doch ok, oder?
Mit einfachen Mitteln im CSS, ohne JavaScript, welches ich so gut wie eh nicht kann.
Ich finde, das CSS macht immer mehr Spass. Viele Möglichkeiten. Das einzige was mir derzeit Kopfzerbrechen bereitet, ist das ANzeigen in allen Browsern.
Doch damit werde ich mich wohl oder übel auch noch beschäftigen.LG
--
kEv*
-----
Hi,
aber generell ist das umgesetzte doch ok, oder?
abgesehen davon, dass Du die display- anstelle der visibility-Eigenschaft setzen solltest: Ja.
Ich finde, das CSS macht immer mehr Spass. Viele Möglichkeiten.
Ja. Ich freue mich schon auf CSS/3.0.
Das einzige was mir derzeit Kopfzerbrechen bereitet, ist das ANzeigen in allen Browsern.
Mit anderen Worten: Die Umsetzung im IE. Überall sonst hast Du recht einheitliche und deterministische Ergebnisse.
Doch damit werde ich mich wohl oder übel auch noch beschäftigen.
Zumindest solltest Du wissen, was der IE so alles nicht kann bzw. falsch macht.
Ich merke gerade: Die Formulierung "zumindest" macht spätestens dann keinen Sinn mehr, wenn es um den Löwenanteil geht. Streich also bitte meinen Einwand ...
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes
-
-
-
-
Hi,
Die :hover-Pseudoklasse funktioniert bei (fast) jedem Element.
fast? Bei welchem denn nicht?
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Hallo Cheatah,
Die :hover-Pseudoklasse funktioniert bei (fast) jedem Element.
fast? Bei welchem denn nicht?
Beim A-Element, denn da gibt es in meinem Browser auch ohne Javascript plötzlich so merkwürdige Mouseover-Effekte wie bei keinem anderen Element!
Gruß Gernot
-
Hallo Cheatah.
Die :hover-Pseudoklasse funktioniert bei (fast) jedem Element.
fast? Bei welchem denn nicht?
Bei option beispielsweise.
Einen schönen Sonntag noch.
Gruß, Ashura
--
sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
„It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
[HTML Design Constraints: Logical Markup]-
Hallo,
Die :hover-Pseudoklasse funktioniert bei (fast) jedem Element.
fast? Bei welchem denn nicht?
Bei option beispielsweise.In Mozilla-Browsern funktioniert
option:hover {font-weight:bold;}Das ist auch so abgesegnet:
CSS doesn't define which elements may be in the above states, or how the states are entered and left.viele Grüße
Axel
-
-
-