Automatically display div on mouse hover and hideaway when mouse remove

Question

i have following div html code.

<div class="container">

                        <div class="images">
                                <img src="<?php echo base_url();?>assets/images/products/<?php echo $product->image;?>" />

                        </div>

                        <div class="compareme"><h3>Compare Me</h3></div>

</div>

And followig CSS and jquery code:

.compareme{
    position:absolute;
    bottom:70px;
    left: 110px;
    height: 300px;
    width:100%;
    background:blue;
    display:none;
    text-align: center;
    margin-left: 25px;
    margin-right:30px;

    font-size:12px;


}

$('.product-images').on('mouseover',function(){
        $('.compareme').show();

    });

the problem is, when i hover that .image div, the all divs display that compare me message. What i actually wanted is like when I over over the .image div, that particular .compareme should appear and fade away when i remove mouse from my .image div

So, please help on this

Thanks in advance

So, i take it to mean you have more then one .compareme div? — Jacob G, Apr 10 '15 at 02:17
gotcha, and you want it to display when you hover over the .images that is its sibling in the HTML? — Jacob G, Apr 10 '15 at 02:20
Yup, i when i hover over the .image div, it should display .compareme div but in only that container. Other .compareme div should not be displayed — , Apr 10 '15 at 02:23

score 0 · Accepted Answer · edited May 23 '17 at 12:08

Suggestion 1 (javascript):

You will need 'this' keyword (How does the "this" keyword work?).

Working example also on https://jsfiddle.net/2dyxydLa/

$('.product-image')
    .on('mouseenter', function(){
        $(this).parent().next().show();
    })
    .on('mouseleave', function(){
        $(this).parent().next().hide();
    });

.compareme{
    position:absolute;
    bottom:70px;
    left: 110px;
    height: 300px;
    width:100%;
    background:blue;
    display:none;
    text-align: center;
    margin-left: 25px;
    margin-right:30px;
    color:white;
    font-size:12px;


}

<!DOCTYPE html>
<html>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="container">    
    <div class="images">
        <img src="http://lorempixel.com/400/200/" class="product-image" />        
    </div>    
    <div class="compareme"><h1>Compare Me</h1></div>    
    <div class="images">
        <img src="http://lorempixel.com/400/200/" class="product-image" />        
    </div>    
    <div class="compareme"><h3>Compare Me</h3></div>    
    <div class="images">
        <img src="http://lorempixel.com/400/200/" class="product-image" />        
    </div>    
    <div class="compareme"><h2>Compare Me</h2></div>    
</div>
</body>
</html>

Suggestion 2 (css):

As suggested by @super-xp you can simply use CSS:

.compareme {
  display:none;
}

.container:hover .compareme {
  display: inherit;
}

<div class="container">
  <div class="images">
    <img src="http://lorempixel.com/400/200/" />

  </div>

  <div class="compareme"><h3>Compare Me</h3></div>
</div>

<div class="container">
  <div class="images">
    <img src="http://lorempixel.com/400/200/" />

  </div>

  <div class="compareme"><h3>Compare Me</h3></div>
</div>

<div class="container">
  <div class="images">
    <img src="http://lorempixel.com/400/200/" />

  </div>

  <div class="compareme"><h3>Compare Me</h3></div>
</div>

score 0 · Answer 2 · answered Apr 10 '15 at 02:47

your may use :hover to do this,for example there are two elements,classname is a and b

if .a is the ancestor node

.a:hover .b {display: block}

if .a is the sibling node just before .b

.a:hover + b {display: block}

also, your can use css3 transition to make it smooth

score 0 · Answer 3 · answered Dec 06 '16 at 15:14

Little bit devious, but I think this is a way to do that in pure JavaScript.

div = {
 show: function(elem) {
  document.getElementById(elem).style.display = "block"; 
 }, 
 hide: function(elem) {
  document.getElementById(elem).style.display = "none";
 }
}

#list1 {
 display: none;
}

 <h4 class="header" onMouseOver="div.show('list1')" onMouseOut="div.hide('list1')"><strong>Support</strong></h4>
  </div>

  <div id="list4">
  <ul>
   <li class="list">Image1</li>
   <li class="list">Image2</li>
  </ul>
  </div>

Automatically display div on mouse hover and hideaway when mouse remove

3 Answers3

Suggestion 1 (javascript):

Suggestion 2 (css):