Links innerhalb und außerhalb der Liste der Elemente, die nicht arbeiten
Ich versuche, erstellen Sie eine ungeordnete Liste, wobei jedes li-element mit einem eigenen hintergrund-Bild (kein text, nur Bild), aber ich habe Probleme (im Firefox zumindest, es funktioniert in Safari) immer der link funktioniert. In Firefox, das Bild verändert sich auf zu schweben, aber Sie können nicht klicken Sie auf. Wie bekomme ich es in Firefox? Ich habe versucht, das A-tag innerhalb und außerhalb der li-tag.
Hier ist die CSS...
#menu {
width:107px;
height:200px;
}
#menu-1, #menu-1-active, #menu-2, #menu-2-active, #menu-3, #menu-3-active, #menu-4, #menu-4-active, #menu-5, #menu-5-active, #menu-6, #menu-6-active {
width:107px;
height:29px;
padding-bottom:5px;
background-repeat: no-repeat;
display:block;
text-indent: -999px;
}
#menu-1 {
background-image: url(menu1.png);
}
#menu-1:hover {
background-image: url(menu1on.png);
}
#menu-1-active {
background-image: url(menu1on.png);
}
#menu-2 {
background-image: url(menu2.png);
}
#menu-2:hover {
background-image: url(menu2on.png);
}
#menu-2-active {
background-image: url(menu2on.png);
}
etc
Und hier die HTML-Ausgabe...
<div id="menu">
<ul>
<a href="1"><li id="menu-1-active">
One
</li></a>
<a href="2"><li id="menu-2">
Two
</li></a>
<a href="3"><li id="menu-3">
Three
</li></a>
<a href="4"><li id="menu-4">
Four
</li></a>
<a href="5"><li id="menu-5">
Five
</li></a>
<a href="6"><li id="menu-6">
Six
</li></a>
</ul>
</div>
InformationsquelleAutor cannyboy | 2009-11-17
Schreibe einen Kommentar Antworten abbrechen
Du musst angemeldet sein, um einen Kommentar abzugeben.
Den link muss innerhalb der
<li>
, für den Anfang, als<li>
ist ein block-level-element in der Erwägung, dass eine<a>
ist inline.Auch die Einstellung :hover auf andere Elemente als
<a>
- zwar unterstützt, die gerne von FF, etc. - ist in meiner Erfahrung ein bisschen fleckig an richtig funktioniert und nicht funktioniert in älteren IEs.Persönlich, wenn es mir der HTML-Code geschrieben, würde es so Aussehen:
Und den CSS-Code würde dann folgendermaßen Aussehen:
Die Sie brauchen, um das a-tag innerhalb des li-Tags. Und legen Sie dann die a-tag display: block; Dadurch wird das a-tag zu füllen, bis alle den Raum in den li-tag und die ganze Fläche anklickbar.
Beispiel: