jQuery获取鼠标当前悬停的子元素答案

【问题标题】：jQuery get child element that the mouse is currently hovering overjQuery获取鼠标当前悬停的子元素
【发布时间】：2012-03-22 10:49:44
【问题描述】：

您好，我有类似以下 HTML 的内容：

<div class="container">
    <img src="first.png" />
    <img src="second.png" />
    <img src="third.png" />
</div>

我想在容器上设置一个hover 事件。这样当我在容器上hover 时，它会告诉我该容器内的哪个图像当前正在悬停。有没有办法做到这一点？我知道我可以像$(".container img").hover() 那样在图像上做一个悬停事件，但这对我需要做的事情不起作用。所以它需要从容器上的hover 事件开始工作。

【问题讨论】：

为什么 img hover 不起作用？所需行为的完整解释会有所帮助，就像 html....你试过什么？

标签： jquery hover

【解决方案1】：

我使用jsfiddle创建了一个示例，你能检查它是否是你想要的。

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

【讨论】：

【解决方案2】：

试试这个。 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>

【讨论】：

【解决方案3】：

使用“鼠标悬停”。一个例子：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);
    }
});

【讨论】：