Geek Answers Handbook

Removing a class with mouse output

I am running on mouseenter / mouseleave with jQuery and it seems to work, but not when I exit the div. This only works when exiting the actual window.

This is my jQuery

$(document).ready(function() { $(".pods .col").on("mouseenter", function() { $(this).find(".pod-overlay").addClass("show") }); $(".pods .col").on("mouseleave", function() { $(this).find(".pod-overlay").removeClass("show") }); });

This is my HTML.

 <div id="splash" class="section section-splash bg"> <div class="pods"> <div class="col col-4"> <div id="pod-splash-food" class="pod pod-food"> <div class="pod-overlay"></div> </div> </div> </div> </div>

I made a js fiddle here. I am learning jquery, so advice is welcome.

http://jsfiddle.net/34h48148/

+8
jquery mouseleave
source share
7 answers

Your function works great! The problem is overlay. You establish this absolute by making it cover the whole body. So, change your CSS a bit, put .pods and .col relative.

 .pods,.col { overflow: auto; position: relative; }

Updated Fiddle

The only thing I can change in your function is to bind both events to the same caller:

 $(document).ready(function() { $(".pods .col").on("mouseenter", function() { $(this).find(".pod-overlay").addClass("show") }).on("mouseleave", function() { $(this).find(".pod-overlay").removeClass("show") }); });
+3
source share

You can also use the hover event as follows:

 $(document).ready(function() { $(".pods .col").hover(function() { $(this).find(".pod-overlay").addClass("show") }, function() { $(this).find(".pod-overlay").removeClass("show") }); });

And this is a hover event doc

However, the problem is not the function, but the CSS associated with the pod-overlay class.
Add these two attributes to your css:

 .pod-overlay { width:260px; height:260px; ... }
+3
source share

Your method is fine, but you are not working with mouseleave because the overlay is on top of .col , and so mouseleave never starts. You can use pointer-events , besides what other answers offer. Something like that

 .pod-overlay { pointer-events: none; .... }

Here is the updated demo http://jsfiddle.net/dhirajbodicherla/34h48148/9/

PS: I changed the overlay border only to display the overlay borders.

+3
source share

You can use pure css

 .pods .col:hover .pod-overlay{ visibility: visible; } .pods .col .pod-overlay{ visibility: hidden; }
+1
source share

In fact, the code works, the problem is that you set an even class of the class ".pods", which covers the entire page ... Thus, an even signal is triggered only when the mouse leaves the page

+1
source share

jquery training, so tips are welcome.

jQuery is not required to achieve the requirement. Try using css pseudo-class :hover

 .pod { width: 250px; height: 250px; background-color: blue; float: left; } .pod-overlay { display: none; z-index: 2; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-color: #fff; background-color: rgba(255, 255, 255, .9) } .pods .col:hover .pod-overlay { display:block; } 
 <div id="splash" class="section section-splash bg"> <div class="pods"> <div class="col col-4"> <div id="pod-splash-food" class="pod pod-food"> <div class="pod-overlay"></div> </div> </div> </div> </div>

jsfiddle http://jsfiddle.net/34h48148/11/

+1
source share

The actual mouse event you should trigger is onmouseout

 $(".pods .col").on("mouseout", function() { $(this).find(".pod-overlay").removeClass("show") });
0
source share

More articles:


All Articles