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获取鼠标当前悬停的子元素

回答

相关问题