CODEWITHSUNDEEP
htmlcssshow-hide
Michiel
Michiel

Reputation: 8083

Easy hide/hover effect with HTML and CSS

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?

Upvotes: 1

Views: 785

Answers (3)

Baldur &#222;&#243;r Emilsson
Baldur &#222;&#243;r Emilsson

Reputation: 311

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>

Upvotes: 2

Rory McCrossan
Rory McCrossan

Reputation: 337560

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.

Upvotes: 1

Eonasdan
Eonasdan

Reputation: 7765

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>

Upvotes: 1

Related Questions