Easy hide/hover effect with HTML and CSS

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?

how is it not working? for `a` tag not linking anywhere use `` — bobek, Nov 28 '11 at 14:48
just use the anchor without href ... in this case you have to force handcourser with css — badfur, Nov 28 '11 at 15:12

score 2 · Answer 1 · answered Nov 28 '11 at 14:51

2

I think the latter CSS block should be

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

For the links without action I recommend using

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

answered Nov 28 '11 at 14:51

Baldur Þór Emilsson

311
1
4

yes that's it :) because there is no anchor child in the anchor – badfur Nov 28 '11 at 15:01
1

using `link` is not what he's looking for see [this](http://stackoverflow.com/questions/134845/href-for-javascript-links-or-javascriptvoid0) – Eonasdan Nov 28 '11 at 15:38

score 1 · Answer 2 · answered Nov 28 '11 at 14:47

1

This seems to work for me: http://jsfiddle.net/qVK6f/

to answer your second question at least, try:

<a href="javascript:void(0);">click</a>

answered Nov 28 '11 at 14:47

Eonasdan

7,563
8
55
82

score 1 · Accepted Answer · answered Nov 28 '11 at 14:49

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.

You were right. There was some other parent class blocking the flow of my css. Thanks! — Michiel, Nov 28 '11 at 16:35

Easy hide/hover effect with HTML and CSS

3 Answers3