JQuery 在悬停时显示 Div

Question

我试图弄清楚当用户将鼠标悬停在内容 block 上时如何使用 JQuery 显示一些工具。例如， block 显示如下，工具最初隐藏:

<div id="block_1">
    <div class="tools" style="display:none;">Tools Here</div>
</div>

<div id="block_2">
    <div class="tools" style="display:none;">Tools Here</div>
</div>

当用户将鼠标悬停在 block_1 中的任何内容上时，我需要它来显示 block_1 的工具。

我发现您可以使用通配符执行以下操作:

$("*[id^=block_]").hover(
    function () {
        // somehow toggle div.tools for this block
    },
    function () {
       // somehow toggle div.tools for this block
    }

我只是不知道如何专门切换该 block 的 div.tools...

Answer 1

编辑:最终，如果您只是进行简单的样式更改，则应该使用 CSS 来完成此操作。不是 JavaScript。

此 CSS 不适用于 IE6，但适用于几乎所有其他现代浏览器。

为父 block_ 元素提供一个类似 block 的类，从 tools 中删除内联样式，然后执行以下操作:

.block .tools {
    display: none;
}
.block:hover .tools {
    display: block;
}

<小时/>

你可以这样做:

$(function() {
    $("div[id^=block_]").hover( function ( e ) {
        $(this).children('.tools').toggle(e.type === 'mouseenter');
    });
});

尽管我认为我应该向 block_ 元素添加一个公共(public)类并按该类进行选择:

$(function() {
    $("div.block").hover( function ( e ) {
        $(this).children('.tools').toggle(e.type === 'mouseenter');
    });
});

HTML

<div class="block" id="block_1">
    <div class="tools" style="display:none;">Tools Here</div>
</div>

<div class="block" id="block_2">
    <div class="tools" style="display:none;">Tools Here</div>
</div>

在事件处理程序中，关键字 this 指的是接收事件的元素。在本例中，为具有 block_n ID 的元素。

然后你使用the .children() method选择具有 tools 类的子元素。

The .toggle() method可用于显示/隐藏元素。我给它一个参数，它是测试所发生事件类型的结果。如果事件是'mouseenter'，则.tools将显示，否则将隐藏。

外部 $(function() {...}); 是将代码包装在 jQuery's .ready() method 中的快捷方式，这可确保您的代码在 DOM 准备就绪之前不会运行。

您可以给the .hover() method如果您愿意，可以使用两个功能。然后我会使用 .show()和 .hide()方法而不是 .toggle()。

$(function() {
    $("div[id^=block_]").hover( function () {
        $(this).children('.tools').show();
    }, function () {
        $(this).children('.tools').hide();
    });
});