nicht angemeldet
Hintergrundfarbe bei "mouseover" ändern
Hallo allerseits!
Ich hoffe, dass ihr mir bei folgendem Problem helfen könnt. Wie kann ich bei dem Kasten, der mit dem unten stehenden Code erstellt wird, seine Hintergrundfarbe ändern, wenn ich mit dem Maus-Zeiger drüber fahre? Das Blau des gesamten Kastens soll z.B. rot werden. Gibt es dazu eine reine CSS-Lösung ohne Java, PHP, etc.?
Vielen, vielen Dank schon einmal für Eure Antworten!
Gruß,
Martin
<head>
<style type="text/css">
.kasten{
cursor:pointer;
background-color:#318BDD;
color:#FFFFFF;
width:200px;
padding:2px;
text-align:center;
font-weight:bold;
}
</style>
</head>
<body>
<a href="2.htm"><div class="kasten">Link</div></a>
</body>
-
Hallo,
Gibt es dazu eine reine CSS-Lösung ohne Java, PHP, etc.?
Schon, aber nicht mit deinem HTML, weil folgendes
<a href="2.htm"><div class="kasten">Link</div></a>schon ungültig ist (<div> ist innerhalb von <a>...</a> nicht erlaubt).
Weise das ganze CSS dem <a> zu (plus einem 'display: block;') und verwende
dann ':hover' für den 'mouseover'-Effekt.Gruß, Jan
-
Danke für deine Antwort!
Hast du an sowas gedacht:<head>
<style type="text/css">
a:link {
cursor:pointer;
background-color:#318BDD;
color:#FFFFFF;
width:200px;
padding:2px;
text-align:center;
font-weight:bold;
}a:hover { text-decoration:none; color:#4040FF; }
</style>
</head><body>
<a style="display:block" href="2.htm">Link</a>
</body>Funktioniert eigentlich ja ganz gut. Aber mein Ziel ist es, dass der gesamte Kasten seine Farbe ändert, nicht nur der Link-Text.
Hast du eine Idee, wie man das lösen könnte?
Martin
-
Okay, habe die Lösung jetzt hier gefunden:
http://aktuell.de.selfhtml.org/artikel/css/mouseover/
-
Hallo,
<a style="display:block" href="2.htm">Link</a>
Das 'display: block;' solltest du zu der zentralen Definition hinzufügen,
damit es später kein Durcheinander gibt.Funktioniert eigentlich ja ganz gut. Aber mein Ziel ist es, dass der gesamte Kasten seine Farbe ändert, nicht nur der Link-Text.
Dann ändere Bei ':hover' doch einfach auch die Eigenschaft 'background-color'
statt nur 'color' ;-)Gruß, Jan
-
-