Mouseover !
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
-
Hallo,
ich habe <p></p> mit CSS bestimmt.
p { background:url(bg-2.gif); text-align:center; font-weight: bold; }
jetzt möchte ich, dass, wenn man darüber geht (es ist kein link) sich der background ändert(bg-2.gif in bg-5.gif) -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Einen solchen Wechsel musst du (noch) mit JavaScript realisieren (onmouseover=\"...\" und onmouseout=\"...\"). Die CSS Variante :hover funktioniert nur bei Links. Vielleicht (hoffentlich) wird sich das bei künftigen CSS-Versionen ändern.
Ein Beispiel findest du bei SELFHTML:
http://de.selfhtml.org/javascript/beispiele/buttons.htm -
Man könnte versuchen den Abschnitt, also <p></p>, innerhalb eines Links zu verwenden. So in der Art <a><p>...</p></a>. Dann könnte man für den Link auch einen Hover definieren, der erscheint, wenn man quasi über den Abschnitt geht.
Edit
Mit dem Opera hab ich grade getestet, der nimmt auch ein :hover bei einem <p>...</p> an.
Mein Code:
<html> <head> <style> p.test{ background: #ffff45; border: 1px solid #000; } p.test:hover{ background: #45ffff; } </style> </head> <body> <p class=\\\"test\\\">Bla blubb. <br> Test<br> <br> hover </p> </body> </html>
Beitrag geändert: 20.9.2007 17:26:31 von tct -
ich hab\'s nicht verstanden...
mein css:
p {
background:url(bg-2.gif);
text-align:center;
font-weight: bold;
}
p:hover {
display:block;
background:url(bg-5.gif);
text-align:center;
font-weight: bold;
}
HTML:
<p>TEST</p> -
Wo liegt dein Problem?
Nimm meinen Beispielcode (allerdings ohne die Backslashes), der geht zumindest im Opera und ich vermute auch, dass es im FF gehen wird.
Wobei dein Code ja so ähnlich ist und deshalb auch gehen sollte.
Beitrag geändert: 20.9.2007 18:02:39 von tct -
JO FUNZT DANKE
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
