This articles has been requested to be deleted.
Sunday, August 30th 2009, 8:55am
Tags
background,
CSS,
hintergrund,
hover,
mouseover,
Navigation
Abstract
Dieses Tutorial erläutert wir ihr mit einfachen CSS Boardmitteln eure Navigation mit unterschiedlichen MouseOver-Bildern ausstattet.
Article
|
HTML Code
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" xml:lang="de"><head>
<title>Navigation mit unterschiedlichen MouseOver-Bildern</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<style type="text/css">
.menu > li > a {
display:block;
border:1px solid #cfcfcf;
background-color:#fff
}
.menu > li {
list-style-type: none;
width:100px;
}
.menu > li > a:hover {
background-color:transparent;
}
</style>
</head>
<body>
<ul class="menu">
<li style="background:url('grafik1.gif') no-repeat right"><a href="#">hover 1</a></li>
<li style="background:url('grafik2.gif') no-repeat right"><a href="#">hover 2</a></li>
<li style="background:url('grafik3.gif') no-repeat right"><a href="#">hover 3</a></li>
<li style="background:url('grafik4.gif') no-repeat right"><a href="#">hover 4</a></li>
</ul>
</body>
</html>
|
Wenn man davon ausgeht, dass man das Resultat gerne dynamisch erreichen möchte und dafür keinen dynamischen CSS Code erstellen will, kann man dazu eine Recht einfache Lösung einsetzen.
Indem dem <li> eine Hintergrundgrafik und dem <a> eine weiße Hinergrundfarbe gegeben wird - hat jedes Element schonmal eine Hintergrundgrafik, die nicht sichtbar ist.
Beim Hovern über den Link (vorsicht, das Hover Element gibt es beim IE6 nur auf <a> Elementen) entfernt man das Hintergrundbild.
Eine Live Demo findet ihr unter
http://demo.easy-coding.de/css/navigatio…useover-bildern. Des weiteren wird der kompletten Code hier als ZIP Archiv zur Verfügung gestellt:
download.zip.
report critical content
