How can I bind this jQuery event to a hover of a HTML element?

Question

What is the syntax to get this bit of jQuery to call when say, h2.myClass is hovered?

$(document).ready(function(){
  setTimeout(function(){
  $("div.clickme, div.clickMeTimes").fadeOut("slow", function () {
  $("div.clickme, div.clickMeTimes").remove();
  });

  }, 2500);
});

Thanks to all the answers, alot of them were very good but @SKS went the extra mile with my extra requirements. The below fades in my div in and out on mouse hover instead of the initial on page load.

$(document).ready(function(){
  $('h2.myClass').hover (function() {
       $("div.clickme, div.clickMeTimes").stop(true).fadeOut("slow");
  }, function () {
       $("div.clickme, div.clickMeTimes").stop(true).fadeIn("slow");       
  });
});

Selvakumar Arumugam · Accepted Answer · 2012-03-21 15:46:22Z

2

Since you want something to be executed only on mouse enter. You can just use mouseenter function.

I think below is what you want,

$(document).ready(function(){
  $('h2.myClass').mouseenter(function() {
    setTimeout(function(){
         $("div.clickme, div.clickMeTimes").fadeOut("slow", function () {
            $(this).remove();
         });
    }, 2500);
  });
});

Also modified $("div.clickme, div.clickMeTimes").remove(); inside the callback to $(this).remove() which will remove the corresponding element instead of trying to remove both element.

Edit: Try below, If you it to fadeIn and fadeOut.

$(document).ready(function(){
  $('h2.myClass').hover (function() {
       $("div.clickme, div.clickMeTimes").stop(true).fadeOut("slow");
  }, function () {
       $("div.clickme, div.clickMeTimes").stop(true).fadeIn("slow");       
  });
});

edited Mar 21, 2012 at 15:46

answered Mar 21, 2012 at 15:07

Selvakumar Arumugam

79.9k15 gold badges123 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

SMacFadyen Over a year ago

Nice - I think i'll accept this, but do you know how I can .show(); the div on mouseleave?

Selvakumar Arumugam Over a year ago

@SMacFadyen If you have something to do on mouse leave then you should use hover. But you are removing those div's? .remove will remove those divs from the DOM.

SMacFadyen Over a year ago

ok.. I just wanted it to toggle.. so maybe just .css(display: block;) and display: none; ?

SMacFadyen Over a year ago

Possibly, the div is shown and fadeOut on mouseenter. Is it possible to add the div back on mouseleave? essentially returning to the first state

Selvakumar Arumugam Over a year ago

@SMacFadyen See my edited answer at the end of my post. Let me know if it works for you.

|

SpYk3HH · Accepted Answer · 2012-03-21 15:06:03Z

1

$(".myClass").hover(function(eIn) { // this is the function for when the mouse is hovered over the item
    //do work
},
function(eOut) {  // this is the func when the mouse leaves the item
    //do work
});

answered Mar 21, 2012 at 15:06

SpYk3HH

22.6k11 gold badges73 silver badges81 bronze badges

Comments

Alytrem · Accepted Answer · 2012-03-21 15:06:11Z

1

$("h2.myClass").hover(function(){
  setTimeout(function(){
  $("div.clickme, div.clickMeTimes").fadeOut("slow", function () {
  $("div.clickme, div.clickMeTimes").remove();
  });

  }, 2500);
}

answered Mar 21, 2012 at 15:06

Alytrem

2,6101 gold badge14 silver badges13 bronze badges

Comments

mddw · Accepted Answer · 2012-03-21 15:08:49Z

1

Put your logic in a function :

var fadeAndRemove = function() {

     setTimeout(function(){
         $("div.clickme, div.clickMeTimes").fadeOut("slow", function () {
              $("div.clickme, div.clickMeTimes").remove();
         });

      }, 2500);
}

then bind it to the hover event :

$("h2.myClass").on('mouseenter', function() {
     fadeAndRemove();
});

Use hover if you have somthing to do on mouseleave also.

answered Mar 21, 2012 at 15:08

mddw

5,5901 gold badge33 silver badges32 bronze badges

Comments

Valerio · Accepted Answer · 2012-03-21 15:13:02Z

1

If you just need to make the hover work:

$("h2.myClass").mouseover(function(){
  $("div.clickme, div.clickMeTimes").fadeOut("slow", function () {
  $("div.clickme, div.clickMeTimes").remove();
});

Otherwise if you need to make it work AND stop the timer:

$(document).ready(function(){
  timer = setTimeout(function(){

$("h2.myClass").mouseover(function(){
  clearTimeout(timer);
  $("div.clickme, div.clickMeTimes").fadeOut("slow", function () {
  $("div.clickme, div.clickMeTimes").remove();
});

answered Mar 21, 2012 at 15:13

Valerio

2,6004 gold badges26 silver badges34 bronze badges

Collectives™ on Stack Overflow

How can I bind this jQuery event to a hover of a HTML element?

5 Answers 5

6 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

6 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related