Hier bist Du: Home « Tipps und Tricks « Pseudoelement :hover für Formularbutton

Tipps und Tricks: Pseudoelement :hover für Formularbutton

Beispiel

Hover-Effekte für normale Hyperlinks werden in der Regel mit dem Pseudoelement :hover realisiert. Dies lässt sich auch auf andere Elemente, wie z.B. Formularbutton anwenden.

Netscape 6.x, Opera 7.0, Mozilla 1.0, Mozilla Firefox 0.8
<html>
<head>
<style type="text/css">
.b:hover
{
 background-color:#aaaaff;
}
</style>
<title>Pseudoelement :hover für Formularbutton</title>
</head>
<body>
<form>
<input type="button" value="Klick mich" class="b">

<button type="button" class="b">
Klick mich
</button>
</form>
</body>
</html>

Im Stylesheet-Bereich wird eine Klasse mit :hover definiert. Das class-Attribut trägst Du dann in die <input>- und <button>-Tags ein, auf die der Hover-Effekt angewendet werden soll.
Denke daran, dass background-color hier nur ein Beispiel ist. In der Übersicht findest Du noch eine ganze Reihe von Stylesheet-Eigenschaften für den Hover-Effekt. Versuche es doch mit Rahmen, Schrifteigenschaften und Schriftfarben

Eine weitere Möglichkeit, :hover auf Button einzugrenzen, sind Attributabhängige Selektoren.

Beispiel

Netscape 6.x, Mozilla 1.0, Mozilla Firefox 0.8
<html>
<head>
<style type="text/css">
*[type="button"]:hover
{
 background-color:#aaaaff;
}
</style>
<title>Pseudoelement :hover für Formularbutton</title>
</head>
<body>
<form>
<input type="button" value="Klick mich" class="b">

<button type="button" class="b">
Klick mich
</button>
</form>
</body>
</html>

In diesem Beispiel wird :hover nur auf Elemente angewendet, in denen das Attribut type mit dem Wert "button" notiert ist.

Browser

Browser, wie der IE 5.0, die diese Technik nicht kennen, zeigen nur keinen Mouseover-Effekt. Du kannst diesen Trick also problemlos verwenden, ohne befürchten zu müssen, dass Deine Seite auf einigen Browsern nicht funktioniert.