Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to show images/links on DIV hover?

Tags:

css

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

  • an arrow up to vote up
  • a flag to mark that message
  • if you are the comment author you get option to delete as well

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

like image 242
JasonDavis Avatar asked Aug 10 '09 01:08

JasonDavis


2 Answers

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.

like image 134
Patrick McElhaney Avatar answered Oct 22 '22 05:10

Patrick McElhaney


div:hover {
    background-image:url('arrow.gif');
}
like image 45
Dave Markle Avatar answered Oct 22 '22 06:10

Dave Markle