ändern Hintergrundbild von li auf a: hover

Question

ich ein Menü haben: (. Abgerundeten Ecken am Boden enthält)

<div id=menu> 
    <ul=navigation> 
    <li><a href=>Home</a></li> 
    </ul> 
</div> 

Mit Schiebetüren Technik, die ich möchte, dass meine Schaltfläche erstellen

I kann dies zur Arbeit bringen, indem er das a und das li schwebt. Aber der li ist größer, und wenn ich über den li schwebe, ohne das a zu schweben, zeigt sich nur das Hintergrundbild für den li.

Jetzt frage ich mich, ob es eine Möglichkeit gibt, den Hover des Li und den Hover des A innerhalb von CSS zu verbinden. Ich behebe dieses Problem lieber ohne JavaScript zu verwenden.

Googleing hat mir nicht weiter geholfen. Ich schätze, das ist nicht möglich, aber ich wollte sicher sein, bevor ich andere Optionen ausprobiere.

Vielen Dank im Voraus für jede Beratung/Hilfe/Vorschläge.

Answer 1

Von dem, was ich Sie sammeln können nicht tun, was Sie nach in der sind wie du es beschrieben hast.

Allerdings würde ich die "a tag" -Anzeige als Block machen und die Breite und Höhe einstellen, um die "LI" zu füllen, so dass Sie a: hover verwenden und das ganze bg ändern können lI ändert

 

li a { 
    background:#000 url(images/bg.png) no-repeat 0 0; 
    display:block; 
    height:20px; 
    width:100px; 
} 
li a:hover { 
    background:#fff url(images/bg.png) no-repeat 0 -20px; 
} 
 

auch etwas padding, um den Text an der richtigen Stelle in dem „lI“ zu sitzen und jede Polsterung aus dem „lI“ entfernen

li: hover wird nicht in älteren ohne JS unterstützt Versionen von IE so mit a: Hover bietet stattdessen bessere Cross-Browser-Kompatibilität

Answer 2

Sie können dies einfach mit:

<div id=menu> 
    <ul> 
    <li><a href=>Home</a></li> 
    </ul> 
</div> 

Dann in Ihrem CSS:

#menu ul li:hover{ 
    background-image:url(newimage); 
} 

Wenn Sie benötigen IE6 Compliance, nur Ihre Links, um die gesamte Breite des UL füllen machen.

#menu ul li a:link, #menu ul li a:visited{ 
    display:block; 
    width:999px; <-- enter pixels 
    height:999px; <-- enter pixels 
} 

dann das Hintergrundbild ändern normalerweise mit:

#menu ul li a:hover{ 
    background-image:url(newimage); 
} 

Answer 3

#menu li { 
    /* normal li style */ 
} 

#menu li a { 
    /* normal a style */ 
} 

#menu li:hover { 
    /* hover li style */ 
} 

#menu li:hover a { 
    /* hover a style */ 
} 

Wird nicht mit IE6 arbeiten ...