Span question

I have a menu div. In that div I have a span. I control that by:

div#nav a span {display: none}

when its hovered, I then display an image. I have another span I want to control and change a different image in a different position. I tried this but it didn't work - how can I control or name another span in the same div?

div#nav span effort a {display:none}
in the span, I have span id="effort" - please someone help me with this, I need to control six different spans in the one div. Thanks.

 

I got it in the end, didn't realise you could add to the word span or div. I just did spanone and it worked.

 

Nope : )

As seen in the other thread.

It's a pain in the ass, but yesh, you need to add a new, different id or class to every anchor (or the span, whoever). I'm doing it right now with airbag guy's site for car logos. <spanone> is a no-go.

BTW, I forgot to say in the other thread, but a menu is a list of links. Or at least, that's what the Sandardistas have decided. So, you really ought to be doing this:
<ul id="nav">
<li><a href="whevever">text for teh screen readers and teh blinds and teh googlies<span></span></a></li>
etc...
</ul>

The spans will be as big as the anchors (cause you'll block them) and their image will cover the text, so everyone wins. The only time you can't do this is when the images are waaay too small or if the images are semi-transparent-- so then, you'd have the text still but you'd have to move it offscreen with like text-indent: -999999billiongazillionunits which sucks for people with CSS on but images off for faster surfing but, oh well. Life sucks and then you die.