Andere background-image a:hover

[T i M]

Ik heb een klein menutje, maar achter de tekst waar je op kan klikken moet een plaatje komen. Nu wil ik graag dat plaatje veranderen zodra je er met de muis overheen gaat. Mijn creatie:

Cascading Stylesheet:

ul#nav {
    list-style: none;
    margin: 0px;
    padding: 0px;
}
    ul#nav  li {    
        width: 164px;
        padding: 5px 0px 0px 28px;      
        height: 18px;
        background-image: url(../images/layout/nav_button.png);
        color: #6e6e6e; 
    }
a.nav_hover:hover { 
    background-image: url(../images/layout/nav_hover.png);
    background-position: 0 0;   
    display: block;
    width: 100%;
    height: 100%;
}

Mijn HTML

HTML:

<ul id="nav">
     <li><a href="#" class="nav_hover">Home</a></li>
     <li><a href="#" class="nav_hover">Knop 2</a></li>
</ul>

Nu werkt het swappen van de background-image niet goed. Het plaatje loopt niet aan de linkerkant van de tekst door. Aan de rechterkant wel. Je krijgt dan een effect zoals het volgende:

code:

---------------------------------------------------
|          ---------------------------------------------  
|          |text                                      |
--------------------------------------------------

Ik heb in de search gezocht en verschillende mensen gevonden met hetzelfde probleem. Echter werken deze oplossingen niet voor mij.

[crisp]

Dat is toch logisch? door de padding op je LI begint je A-element niet helemaal links. Je zou dus de padding op je A-element moeten zetten of de :hover op je LI moeten definieëren (en dus een oplossing moeten zoeken om dat ook in IE < 7 te laten werken )

[Geert.H]

Dit komt omdat het plaatje de achtergrond afbeelding van de anchor is, en niet van de list. Wil je dus dat de afbeelding ook aan de linkerkant van de text zichtbaar is dan moet je zorgen dat de achtergrondafbeelding van de list veranderd.

edit:
@Crisp, een padding lijkt mij het netste, hoef je ook geen vreemde hacks toe te passen e.d.
@ts, je moet met de oplossing van Crisp ook nog even de padding van de li op nul zetten

[ Voor 28% gewijzigd door Geert.H op 29-03-2007 20:49 ]

[T i M]

@Geert.H, dan staat mijn text op het plaatje niet meer goed.

edit: te snel gelezen!

[ Voor 66% gewijzigd door T i M op 29-03-2007 20:55 ]

[Geert.H]

@TiM; probeer eens wat meer, wat crisp zegt klopt wel (ik zei namelijk hetzelfde als hij). Je moet je list een padding-left:0px meegeven, en vervolgens de a een padding-left:10px (oid) meegeven. Dan staat je tekst op dezelfde plaats als eerst.

ok