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

- Frank

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_n ID 的元素。

然后用 .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();
    });
});

- user113716

---

@Frank - 不用谢。我在这个答案的顶部添加了一个纯CSS解决方案。：o） - user113716

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()，这样更容易管理。

- mway

Answer 3

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

- Dustin Laine

Answer 4

你可以尝试这个：

$(document).ready(function(){
$('#block_1').mouseover(function(e){
$('#block_2').show();
});
$('#block_1').mouseout(function(e){
$('#block_2').hide();
});
});

这里是添加一个漂亮的淡入淡出效果：

$(document).ready(function(){
$('#block_1').mouseover(function(e){
$('#block_2').fadeIn('fast');
});
$('#block_1').mouseout(function(e){
$('#block_2').fadeOut('fast');
});
});

- Josiah

Answer 5

终于我找到了一个超级简单的解决方案来实现响应式的超级下拉菜单。这是基于HTML5数据属性的。只需要3行代码！;)

$('.button, .content').hover(function() {
    $($(this).data('coupling')).toggle();
});​

http://jsfiddle.net/QrEuQ/

- Marek Ka.