jquery - Automatically display div on mouse hover and hideaway when mouse remove -
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 , 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 hover .image div, divs display compare me message. wanted when on over .image div, particular .compareme should appear , fade away when remove mouse .image div
so, please on this
thanks in advance
suggestion 1 (javascript):
you need 'this' keyword (how "this" keyword work?).
working example 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 @super-xp can 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>