悬停JQuery显示Div

我想弄清楚如何使用JQuery来显示一些工具时，用户是悬停在内容块。悬停JQuery显示Div

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

来源

2010-11-01 Frank

这样做：

$("*[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()，因为这将是更容易管理的考虑。

来源

2010-11-01 22:36:35 mway

这一个工作，非常感谢。 – Frank 2010-11-01 22:48:25

编辑：最终，如果你只是做简单的样式更改，你应该使用CSS来完成这一点。不是JavaScript。

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

给父block_元素，如block A级，来自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的元素。

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

来源

2010-11-01 22:36:09 user113716

非常感谢。 – Frank 2010-11-01 22:51:57

@Frank - 不客气。我在这个答案的顶部添加了一个编辑，给出了一个纯粹的CSS解决方案。：o） – user113716 2010-11-01 22:53:58

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

来源

2010-11-01 22:38:05

你可以试试这个：

$(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'); 
}); 
});

来源

2010-11-01 22:38:58 Josiah

Finaly我发现我的响应大型下拉超级简单的解决方案。这基于html5数据属性。只有3行！ ;）

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

http://jsfiddle.net/QrEuQ/

来源

2012-09-12 22:17:20

悬停JQuery显示Div

回答

相关问题