nicht angemeldet
Hover Effekt bei Liste funktioniert nicht
Hallo,
ich hab mir eine horizontale Navigationsliste gebaut. Beim Überfahren eines Listenelementes mit der Maus soll es mit Hilfe von hover rot eingefärbt werden. Aus Layouttechnischen Gründen muß ich die Liste unter den Header schieben, indem ich ein negatives margin für die Liste verwende. Das klappt auch soweit. Wenn ich allerdings hingehe und mit Hilfe der Glider Levin-Methode dem Header ein Hintergrundbild zuweise, dann klappt es nichtmehr. Warum das so ist, habe ich bereits herausgefunden. Bei der Glider Levin Methode muß ich den Header ja relativ positionieren, damit das innere span Element relativ zum Header positioniert werden kann.
Genau diese relative Ausrichtung des headers führt dazu, dass der hover Effekt, bei der Liste die sich unter dem Header befindet, nichtmehr funktioniert. Im folgenden Quellcode kann man das sehr gut sehen. Wenn ich die Zeile "position: relative;" in der header ID entferne, dann klappt der hover Effekt. Lasse ich sie drin klappt es nicht. Wie kann ich das lösen?
#header {
height: 250px;
border-width: 1px;
border-style: solid;
border-color: red;
position: relative;
}
Hier noch das ganze Testbeispiel:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link href="main.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<h1 id="header">
</h1>
<ul id="navigation">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</body>
</html>
* {
padding: 0px;
margin: 0px;
}
body {
width: 880px;
margin: 0px auto;
}
#header {
height: 250px;
border-width: 1px;
border-style: solid;
border-color: red;
position: relative;
}
#navigation {
float: left;
width: 880px;
margin: -50px 0px 0px 0px;
list-style: none;
}
#navigation li {
float: left;
}
#navigation a {
display: block;
width: 100px;
height: 25px;
line-height: 25px;
margin: 0px 10px 0px 0px;
text-align: center;
text-decoration: none;
border: 1px solid black;
border-left-color: white;
border-top-color: white;
}
#navigation a:hover {
color: white;
background: red;
}
-
Hi,
ich hab mir eine horizontale Navigationsliste gebaut. Beim Überfahren eines Listenelementes mit der Maus soll es mit Hilfe von hover rot eingefärbt werden. Aus Layouttechnischen Gründen muß ich die Liste unter den Header schieben, indem ich ein negatives margin für die Liste verwende.
Wenn ein Element von einem anderen ueberdeckt wird, dann kannst du nicht mehr darueber hovern - das sollte doch aber eigentlich logisch sein.
MfG ChrisB
--
„This is the author's opinion, not necessarily that of Starbucks.“-
Wenn ein Element von einem anderen ueberdeckt wird, dann kannst du nicht mehr darueber hovern - das sollte doch aber eigentlich logisch sein.
Na eben nicht. Sonst würde es doch ohne "position: relative" auch nicht funktionieren.
Außerdem klappt es 1.) nicht wenn ich die Liste unter den header schiebe und 2.) auch nicht wenn ich den header unter die Liste schiebe.
Bei zweites ist der header unter der Liste. Demnach ist die Liste nicht überdeckt.
Das sollte doch eigentlich logisch sein ;-)
-
Hi,
Wenn ein Element von einem anderen ueberdeckt wird, dann kannst du nicht mehr darueber hovern - das sollte doch aber eigentlich logisch sein.
Na eben nicht. Sonst würde es doch ohne "position: relative" auch nicht funktionieren.
Nein, weil es ohne hinter der UL liegt.
Außerdem klappt es 1.) nicht wenn ich die Liste unter den header schiebe und 2.) auch nicht wenn ich den header unter die Liste schiebe.
Doch, natuerlich klappt es bei letzterem - wenn du bspw. der UL ebenfalls relative Position und einen hoeheren z-index verpasst.
MfG ChrisB
--
„This is the author's opinion, not necessarily that of Starbucks.“-
Doch, natuerlich klappt es bei letzterem - wenn du bspw. der UL ebenfalls relative Position und einen hoeheren z-index verpasst.
Jetzt funktioniert es. Ich hatte bisher nie mit dem z-index gearbeit. Danke für den Tipp.
-
-
Ich scheine ein ähnliches Problem zu haben. In Bereich der Überlappung wird der Cursor im IE6 nicht als Move dargestellt. Im FF3 funktioniert es tadellos. Es geht hierbei nicht nur um den Cursor, sondern auch ein Mausklick wird im Bereich der Überlappung vom IE nicht für das div verarbeitet. Wenn die Position auf relative geändert wird, so dass es keine Überlappung gibt, reagieren beide Browser gleich und machen es richtig.
Weiß jemand Rat, wie es auch mit der Überlappung funktioniert? Unten das Beispiel.
<html> <body> <img src="http://src.selfhtml.org/logo.gif" /> <div style="position:absolute;top:0px;left:0px;width:80px;height:80px;border:1px solid red;cursor:move;"></div> </body> </html>
-
-