如何將此jQuery事件綁定到HTML元素的懸停？

Question

當say，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); 
    }); 
}); 

而且回調$(this).remove()這將刪除相應的元素，而不是試圖刪除這兩個元素中修改$("div.clickme, div.clickMeTimes").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(); 
}); 

使用懸停，如果你有財產以後做鼠標離開也。

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