Question

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

Answer 1

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

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

Answer 2

试试这个。 Div而不是图像，所以我更容易测试。：）

<!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>

Answer 3

使用'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);
    }
});

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

3 个答案: