jQuery獲取鼠標當前懸停的子元素

嗨，我有一個包含4個圖像的容器div。我想在容器上設置一個懸停事件，這樣當我將鼠標懸停在容器上時，它會告訴我該容器內的哪個圖像當前正在懸停。有沒有辦法做到這一點？我知道我可以在圖像上做一個懸停事件，而不是像$(".container img").hover()，但不會爲我需要做的工作，所以它需要從容器上的懸停事件工作jQuery獲取鼠標當前懸停的子元素

來源

2012-03-22 geoffs3310

爲什麼不會img懸停工作？所需行爲的完整解釋將有助於html ... ....你有什麼嘗試？ – charlietfl 2012-03-22 11:16:31

我已經使用jsfiddle創建了一個示例，你可以檢查它是否是你想要的。

$(".container").on("hover", "img", function(e){ 
    var $target = $(e.currentTarget); 
    $out.html($target.attr("src")); 
})

來源

2012-03-22 11:10:12

試試這個。 Divs而不是圖像，所以我測試起來更容易。 :)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd"> 

<html lang="en"> 
<head> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script type="text/javascript" charset="utf-8"> 
     $(document).ready(function() { 
      $('div').hover(function() { 
       $('#out').html($(this).attr('tag')); 
      }) 
     }); 
    </script> 
    <style type="text/css" media="screen"> 
     div { height: 40px; margin: 10px; border: 2px solid #ddd; } 
    </style> 
</head> 
<body> 
<div id="name1" tag="one">hey</div> 
<div id="name2" tag="two">hey2</div> 
<div id="name3" tag="three">hey3</div> 
<div id="name4" tag="four">hey4</div> 
<p id="out"></p> 
</body> 
</html>

來源

2012-03-22 10:57:37 deadrunk

使用'mouseover'。舉例：http://jsfiddle.net/d4gMS/

$('#container').on('mouseover', function(ev) { 
    var src = ev.originalEvent.srcElement; 
    if (src.id !== 'container') { 
     $('#out').html('hovering ' + ev.originalEvent.srcElement.id); 
    } 
});

來源

2012-03-22 11:11:51

jQuery獲取鼠標當前懸停的子元素

回答

相關問題