[HTML/CSS] Wordpress rollover image werkt niet

[QErikNL]

Ik ben al uren bezig om een rollover afbeelding werkend te krijgen met css en html in Wordpress, maar het wil maar niet werken. Ik heb al heel veel opties geprobeerd, maar ik kom er niet uit, en ik hoop dat iemand mij hieruit kan helpen.

Ik heb de volgende code:

code:

CSS: 

img.art-header-donate
{
background: transparant;
margin-top: 210px;
margin-left: 180px;
width: 348px;
height: 27px;
display: block;
}

a.art-header-donate
{
background-image: url('images/donate-button.png');
background-position: 0 0;
}

a.art-header-donate:hover
{
background-image: url('images/donate-button.png');
background-position: 0 -27px;
}

HTML:

<img class="art-header-donate" a href="#" /></a>

[MsG]

Een img -tag met een a href er in? Heb je wel enig idee wat je aan het doen bent?

Los van de rest moet het natuurlijk dit zijn:

HTML:

<a href="#" /><img class="art-header-donate"></a>

Maar heb je ook ergens een werkende testcase?

[RobIII]

MsG schreef op dinsdag 29 oktober 2013 @ 16:10:
Een img -tag met een a href er in? Heb je wel enig idee wat je aan het doen bent?

Jij sluit je <a> ook prematuur

<a href="#" />...</a>

[ Voor 19% gewijzigd door RobIII op 29-10-2013 16:27 ]

[RM-rf]

sowieso is de IMG hier overbodig als je die geen SRC geeft (of je moet een lelijk spacer-gifje willen gebruiken)

praktische zou gewoon een A-block zijn, eventueel met een span en de toepasbare tekst, zodat je die kunt verbergen..

HTML:

<a href="#" title="donate" class="art-header-donate">
   <span>donate</span>
</a>

Cascading Stylesheet:

a.art-header-donate
{
   display: inline-block;
   margin-top: 210px;
   margin-left: 180px;
   width: 348px;
   height: 27px;
   background-image: url('images/donate-button.png');
   background-position: 0 0;
}
a.art-header-donate:hover
{
   background-position: 0 -27px;
}

a.art-header-donate span { display: none; }

[QErikNL]

Bedankt voor jullie reacties

@hierboven:

Ik heb de code zojuist gebruikt, en toch wil het niet werken, terwijl het in theorie inderdaad wel zou moeten werken.
Zou je misschien even naar de broncode kunnen kijken? *snip* Kan iemand even...?

[ Voor 20% gewijzigd door RobIII op 29-10-2013 20:39 ]

[C0rnelis]

@Erik, kijk eens naar je <div class="art-shapes"></div>, deze positioneert zich bovenop/voor het a-element waardoor de hover de link niet bereikt. Ik weet niet precies wat je hier mee probeert te bereiken, maar het lijkt hier prima te werken zonder deze div.

Als ik een opmerking mag plaatsen: bijna alle tekst vind ik erg onleesbaar

[ Voor 15% gewijzigd door C0rnelis op 29-10-2013 20:19 ]