Question

当说h2.myClass悬停时，让jQuery调用的语法是什么？

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

  }, 2500);
});

感谢所有的答案，很多都非常好，但@SKS额外的要求加倍了。鼠标悬停时我的div进出淡出，而不是页面加载时的初始淡入淡出。

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

Answer 1

因为您只想在鼠标输入时执行某些操作。您只需使用mouseenter功能即可。

我认为以下是你想要的，

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

还在$("div.clickme, div.clickMeTimes").remove();的回调中修改$(this).remove()，这将删除相应的元素，而不是尝试删除这两个元素。

编辑：尝试下面，如果你要淡入淡出和淡出。

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

Answer 2

$(".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
});

Answer 3

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

  }, 2500);
}

Answer 4

将你的逻辑放在一个函数中：

var fadeAndRemove = function() {

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

      }, 2500);
}

然后将其绑定到悬停事件：

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

如果你还有关于mouseleave的事情，请使用悬停。

Answer 5

如果只是需要进行悬停工作：

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

否则，如果你需要让它工作并停止计时器：

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

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

如何将此jQuery事件绑定到HTML元素的悬停？

5 个答案: