Question

It’s an easy question and I’ve done it several times before, but for some reason, it’s not working this time. I have an image and when a user hovers it, a description should show.

HTML:

<div class="description custom">
   <a class="description_help_text" href="">
     <img src="../../misc/help.png">
     <span>Bla bla bla.</span>
   </a>
</div>

CSS:

div.description a.description_help_text span {
    display: none;
}

div.description a.description_help_text a:hover span {
    display: block;
}

But for some reason, it’s not working. I’m guessing some kind of stupid syntax I’m overlooking right now.

And a second question, is it possible to use a a-tag without linking it? So a user can click on it as much as he wants, but with no actions from the browser?

Answer 1

Your CSS should work fine, so my guess is that you have a parent class somewhere which is affecting it. Try looking through the ascendent styles in Firebug.

Re. your second question, you can supply no href value to an anchor element, but this may still cause the page to jump when the link is clicked, and IIRC it is not valid HTML. An alternative is to link to javascript:void(0);, although this is rather ugly IMO.

The only way to fully prevent any link behaviour is to create a link handler for the element in javascript and place event.preventDefault(); within it.