Zurück

Dynamische Pseudo-Klassen: :hover: Mouseover-Effekt

<style type="text/css">
a.a:link{color:#blue;}
a.a:visited{color:#maroon;}
a.a:hover{color:#red;}
a.a:active{color:#red;}

p.c {padding:30px;}
p.b:hover{color:#f00;background-color:#00f;}
p.c:hover{color:#f00;background-color:orange;cursor:crosshair;}

div {width:300px;height:100px;border:4px solid #666;margin:50px;}
div:hover {border:4px dashed #f00;}

table {width:50%;border:1px solid #666;}
td {background-color:#fff;border:1px solid #aaa;}
td:hover {background-color:#efefef;}
</style>

...

<p><a class="a" href="#top">Hyperlink 1</a></p>

<p class="b">p-Tag</p>
<p class="c">p-Tag mit padding und Cursor:crossair</p>
<div>div-Container</div>

<table>
 <tr><td>Zeile 1</td></tr>
 <tr><td>Zeile 2</td></tr>
 <tr><td>Zeile 3</td></tr>
</table>

Hyperlink 1

p-Tag

p-Tag mit padding und Cursor:crossair