HTML/CSS: Div-Bereiche mit Hover-Farbe
Hi!
Ich hab einige <div>-Bereiche, wo mein Text etc. reinkommt. Diese haben nun auch diverse IDs und Klassen. Jetzt möchte ich aber, dass in dem jeweiligen Bereich die Hintergrundfarbe geändert wird, sobald die Maus drüber kommt. Wenn ich einen Link dort hätte, könnte ich es etwa so machen:
Code:
Wie kann ich den Stylesheet nun so verändern, dass das "Hover"-Ereignis unabhängig von irgendwelchen Links oder anderen Elementen ausgelöst wird? "div:hover" hab ich schon versucht, das geht nicht... :(
div#a a:hover {
background-color: black; } Soll am Ende so ähnlich aussehen, wie die Forenansicht der DP... :) Nur für diejenigen, die noch nicht verstanden haben sollten, was ich meine... ;) |
Re: HTML/CSS: Div-Bereiche mit Hover-Farbe
Also die DP zumindest macht das mit JavaScript, und ich bin mir auch nciht sicher, dass das mit CSS geht, da ja nur Links dieses Hover Teil haben. Du müsstest diese Bereiche schon irgendwie als Link machen, z.b. mit # oder so, ohne wirds nciht gehen
|
Re: HTML/CSS: Div-Bereiche mit Hover-Farbe
Zitat:
|
Re: HTML/CSS: Div-Bereiche mit Hover-Farbe
Ist es das was du meinst?
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html> <head><title>Titel</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <style><!-- body { background:#FFFFFF; margin:25px; overflow:auto; } div.hov { border:1px solid #808080; background:#E9E9E9; font-family:Arial; font-size:12px; font-style:normal; font-weight:normal; padding:8px; width:500px; } div.hov:hover { background:#F4F4F4; width:500px; } --></style></head> <body> <div class="hov"> KeePass Password Safe ermöglicht das Verwalten von Passwörtern. Eine Einsetzung ist gerade dann von Vorteil, wenn Sie verschiedene Kennwörter haben und sich diese nur schwer merken können. Das Programm speichert das Ganze in einer verschlüsselten Datenbank ab. Das Tool steht nun in der Version 1.02 bereit. </div> </body></html> |
Re: HTML/CSS: Div-Bereiche mit Hover-Farbe
Im Prinzip geht das, nur der IE kann das nicht (dort ist :hover nur für das <a>-Element verfügbar).
Es gibt da die Scriptsammlung IE7, die man per Conditional Comment explizit für den IE einbindet. Diese Scripts stellen folgende Funktionen zur Verfügung: Zitat:
|
Re: HTML/CSS: Div-Bereiche mit Hover-Farbe
Naja, ich würd dann einfach mal spntan sagen: Pech für IE-User. Haben die halt ein "langweiliges" Design :P
Werd es dann aber wohl mit dem CSS-Code machen... Danke :) |
Re: HTML/CSS: Div-Bereiche mit Hover-Farbe
Zitat:
Wenn der Browser zu dumm ist, ist er eben zu dumm. Man sollte die Leute mit ekligen Hacks nicht noch ermutigen dieses Mistvieh zu benutzen... |
Re: HTML/CSS: Div-Bereiche mit Hover-Farbe
Kann der IE 7 diesen CSS-Hover nicht darstellen? :shock:
Deer Park 2 kann es. |
Re: HTML/CSS: Div-Bereiche mit Hover-Farbe
Zitat:
Ausserdem hab ich in den Spezifikationen noch nicht gesehn, dass :hover fuer alle Elemente gilt, wenn ich mich richtig erinnere so gilt das nur fuer das <a>-Element, wobei einige Browser diese Pseudoklassen fuer alle Elemente als gueltig ansehn. Vielleicht kann mir jemand mal eine offizielle Spezifikation zeigen, in der das Gegenteil steht. Greetz alcaeus |
Re: HTML/CSS: Div-Bereiche mit Hover-Farbe
Zitat:
in der Spezifikation von CSS2 steht folgendes: Zitat:
Also nochmal Glück für deinen geliebten IE. :mrgreen: |
Re: HTML/CSS: Div-Bereiche mit Hover-Farbe
Zitat:
Zitat:
Irgendwelche Dialekte als Standard JS zu bezeichnen und sich dann zu wundern wäre, als ob ich mich wundern würde, warum Chrome keinen Delphi code schluckt und vice versa. ;) Zitat:
|
Re: HTML/CSS: Div-Bereiche mit Hover-Farbe
Liste der Anhänge anzeigen (Anzahl: 1)
Wie wäre es denn wenn du ein OnMouseOver und ein OnMouseOut in den div-Tag einbindest?
Ist zwar nicht sehr elegant da es in jedes Tag geschrieben werden müsste aber immerhin eine Lösung (abgesehen davon, dass mit PHP eine elegantere Lösung möglich ist). Könnte evtl. so aussehen:
Code:
Hinter dem "style" kann jedes X beliebige Style-Sheet-Attribut auf das Element angewendet werden.<div OnMouseOver="this.style.backgroundColor = '#FF0000'" OnMouseOut="this.style.backgroundColor = '#FFFF00'">Mein Text</div> Allerdings ist auf die Groß- und Kleinschreibung von backgroundColor zu achten wobei folgende einfache Regel gilt: Steht im Style-Attribut ein Bindestrich so wird dieser weggelassen UND darauf folgender Buchstabe wird Groß geschrieben. Sonst alles andere Klein. Bsp.: Aus StyleSheet wird JavaScript: aus background-color wird backgroundColor aus color wird color aus text-align wird textAlign usw.. Weiter Informationen sind u.a. auch bei SelfHTML zu finden. Stichwort Style unter JavaScript. Beispieldatei im Anhang. |
Re: HTML/CSS: Div-Bereiche mit Hover-Farbe
Zitat:
|
Re: HTML/CSS: Div-Bereiche mit Hover-Farbe
Zitat:
|
Re: HTML/CSS: Div-Bereiche mit Hover-Farbe
Zitat:
|
Re: HTML/CSS: Div-Bereiche mit Hover-Farbe
Liste der Anhänge anzeigen (Anzahl: 1)
Zitat:
Gibt es da tatsächlich noch jemanden, der die Kombi FF + Tidy nicht benutzt? :shock: Suche mal unter den FF Extensions nach Tidy HTML Validator... Edit: Mal'n screenie angehängt. ;) |
Re: HTML/CSS: Div-Bereiche mit Hover-Farbe
Diese Extension destabilisiert meinen Firefox total. Abstürze nach kürzester Zeit.
|
Re: HTML/CSS: Div-Bereiche mit Hover-Farbe
Zitat:
|
Re: HTML/CSS: Div-Bereiche mit Hover-Farbe
Zitat:
Zitat:
Zitat:
Zwar beziehen sich die Beispiele auf <a>, der Text jedoch spricht in keinster Weise von einer Beschränkung auf das <a>-Element. |
Alle Zeitangaben in WEZ +1. Es ist jetzt 03:35 Uhr. |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
LinkBacks Enabled by vBSEO © 2011, Crawlability, Inc.
Delphi-PRAXiS (c) 2002 - 2023 by Daniel R. Wolf, 2024 by Thomas Breitkreuz