CODEWITHSUNDEEP
css
JasonDavis
JasonDavis

Reputation: 48933

How to show images/links on DIV hover?

How can I achieve the affect like here on SO when you hover over a comment:

How can I make links and images like that show when hovering over a DIV or even a table cell?

Upvotes: 10

Views: 25859

Answers (4)

Patrick McElhaney
Patrick McElhaney

Reputation: 59271

Try this:

.comment .button {
   visibility: hidden;
}  

.comment:hover .button {
   visibility: visible;
}

Assuming your HTML is something like this:

<div class="comment">
  <a ...><img class="vote button" ...></a>
  <a ...><img class="flag button" ...></a>
  <a ...><img class="delete button" ...></a>
  <span class="comment-text">...</span>
</div>

Andrew noted that this pure CSS solution won't work in IE6. And as Noel pointed out, hovering just isn't an option in mobile browsers. You can use progressive enhancement to have the buttons always visible in those cases.

<style type="text/css" media="screen">

.comment .button {
   visibility: hidden;   
}  

.comment:hover .button {
   visibility: visible;
} 

</style> 


<!--[if lt IE 7]>  
<style type="text/css"> 
.comment .button {
  visibility: visible; 
}   
</style>
<![endif]-->

IE6 will understand the first style, making the buttons hidden, but not the second, making them visible again on hover. The third style is in a conditional comment, which non-IE browsers and IE7+ will ignore. It overrides the first style, making the buttons visible always.

Upvotes: 20

Andrew Moore
Andrew Moore

Reputation: 95314

Consider the following HTML:

<div class="special">
    <div class="links_holder">
        <a class="flag" title="Flag" href="flag.html">Flag</a>
    </div>
    <div class="content">
        Hello, this is my content!
    </div>
</div>

You can use the following CSS to hide the links:

div.special div.links_holder {
    float: left;
    width: 16px; /* For a 16x16 link image */
    margin: 0 4px 0 0; padding: 0;
    visibility: hidden;
}

div.links_holder a.flag {
    display: block;
    width: 16px; height: 16px;
    overflow: hidden;

    /* Move the text out of the way 
       It's there for screen readers */
    text-indent: -9999px; 
    background: url('flag.gif') top left no-repeat;
}

div.special:hover div.links_holder {
    visibility: visible;
}

Note that this will not work in IE6 since IE6 and below only supports the :hover pseudo-tag on <a> tags. In which case you'll need to revert back to a JavaScript solution. Example with MooTools:

$$('div.links_holder a.flag').each(function(el) {
    el.addEvents({
        'mouseenter': function() {
             el.addClass('hover');
         },
         'mouseleave': function() {
             el.removeClass('hover');
         }
    });
}, this);

Upvotes: 0

Anthony
Anthony

Reputation: 37045

The key to what you are trying to do -- as I think the other answers are saying-- isn't to create the content on hover, but to make it "visible" on hover. It's always there, just not in a way the user can see or interact with. So you'd have something like:

 <div class="vote_arrow">
     <a ...>Clicking on me is fun</a>
 </div>

and then a CSS rule like:

 .vote_arrow a {
     display:none;
  }

  .vote_arrow:hover a {
      display: block;
  }

Be aware, though, that this method requires that the user have CSS turned on. Make your hidden content set up in such a way that if I have CSS off, the links still make some amount of sense.

Upvotes: 0

Dave Markle
Dave Markle

Reputation: 97671

div:hover {
    background-image:url('arrow.gif');
}

Upvotes: 1

Related Questions