JQuery在悬停时显示Div

Question

我试图找出当用户将鼠标悬停在内容块上时如何使用JQuery显示一些工具.例如,块显示如下,最初隐藏的工具:

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

我只是想不通你怎么能专门切换那个块的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_元素中添加一个公共类并按该类选择:

$(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_nID 的元素.

然后使用该.children()方法选择具有tools该类的子元素.

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

外部$(function() {...});是一个快捷方式,用于将代码包装在jQuery的.ready()方法中,这样可以确保在DOM准备好之前代码不会运行.

你可以给的.hover()方法,如果你喜欢两种功能.然后我会使用.show()和.hide()方法而不是.toggle().

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

Answer 2

做这个:

$("*[id^=block_]").hover(
    function() {
        // Styles to show the box
        $(this).children('.tools').css(...);
    },
    function () {
        // Styles to hide the box
        $(this).children('.tools').css(...);
    }
);

您可能想要考虑使用$.addClass()和$.removeClass(),因为它会更容易管理.