0

我有 div 标签（id=div_1），这个标签有几个相邻元素，在这个标签上的 moseout 之后，鼠标已经在其他元素上，对吗？我想在div_1标签上的 onmouseout 上，警报 id 元素，现在是鼠标悬停，如何做到这一点？

<div id="div_1" style="width: 100px; height: 100px; background-color: #090"></div>
<div id="div_2" style="width: 100px; height: 100px; background-color: #900"></div>
4

2 回答 2

2

更新

在评论中，你说

我需要 id 其他元素，现在鼠标悬停在上面

那是一个不同的问题。为此，您需要知道鼠标已离开div，并知道它已输入其他内容。我可能会为此使用mouseleaveand的组合mouseover，如下所示：

$("#div_1").mouseleave(function() {
    // We're leaving the div, set up to capture mouseover
    $("....selector for a container of these elements...").one("mouseover", function(e) {
        // Get the ID of the bottommost element
        console.log(e.target.id);

        // Or alternately, in case it doesn't have one
        var elementWithID = $(e.target).closest('[id]');
        if (elementWithID[0]) {
            console.log(elementWithID[0].id);
        }
    });
});

但我会非常非常努力地想出一种不同的方式来满足基本需求。

原答案：

简短版本：

$("#div_1").mouseout(function() {
    alert(this.id); // But I'd avoid alert if I were you, perhaps console.log?
});

但是请继续阅读...

长版：

当您使用 jQuery 设置事件处理程序时，调用该处理程序时，this是对您挂钩事件的 DOM 元素的引用，当然id也是属性的反射id属性。

但是请记住mouseout 气泡mouseout，因此只要鼠标离开您（其任何后代）中的元素div，即使它没有离开div本身，您也会收到该事件。如果您只想知道它何时离开div但不离开其任何后代元素，请mouseleave改用（最初仅限 IE，但 jQuery 提供跨浏览器）。

如果您想将其概括为所有具有 class 的 div foo：

$("div.foo").mouseout(function() { // Or, of course, mouseleav
    console.log(this.id);
});
于 2012-10-22T13:11:18.083 回答
2

这是你想要的吗？

HTML

<div id="container">
    <div id="1">1</div>
    <div id="2">2</div>
</div>

JavaScript

$('#container > div').mouseover( function() {
    alert ($(this).attr('id'));
});​

演示

http://jsfiddle.net/CFtP5/

编辑

当不使用父元素来选择子元素时。只需使用通配符，如下所示：

JavaScript

$("[id^=div]").mouseover (function() {
    alert ($(this).attr('id'));
});​

HTML

<div id="div_1">1</div>
<div id="div_2">2</div>
<div id="div_3">3</div>

演示

http://jsfiddle.net/VPm8M/

于 2012-10-22T13:12:36.217 回答