Tipps und Tricks: Pseudoelement :hover für Formularbutton
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.
,
,
,
<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.
,
,
<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.