JQuery 在悬停时显示 Div

JQuery Show Div on Hover

提问by Frank

I'm trying to figure out how to use JQuery to display some tools when the user is hovering over a content block. For example, the blocks are displayed as follows with the tools initially hidden:

我试图弄清楚当用户将鼠标悬停在内容块上时如何使用 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>

I need it to show the tools for block_1 when the user is hovering over anything in block_1.

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

I see that you can use wildcards to do something like:

我看到您可以使用通配符来执行以下操作：

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

I just can't figure out how you can specifically toggle just the div.tools for that block...

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

回答by user113716

EDIT: Ultimately, if you're just doing simple style changes, you should use CSS to accomplish this. Not javascript.

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

This CSS won't work for IE6, but it will for pretty much all other modern browsers.

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

Give the parent block_elements a class like block, remove the inline styles from tools, then do this:

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

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

---

---

You could do this:

你可以这样做：

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

Although I think I'd add a common class to the block_elements and select by that class:

虽然我认为我会向block_元素添加一个通用类并按该类进行选择：

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

HTML

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>

Inside event handlers, the keyword thisrefers to the element that received the event. In this case, the element with the block_nID.

在事件处理程序中，关键字this指的是接收事件的元素。在这种情况下，具有block_nID的元素。

Then you use the .children()methodto select child element(s) that have the toolsclass.

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

The .toggle()methodcan be used to show/hide elements. I've given it an argument that is the result of testing the type of event that took place. If the event was 'mouseenter', the .toolswill be shown, otherwise it will be hidden.

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

The outer $(function() {...});is a shortcut for wrapping your code in jQuery's .ready()method, which makes sure that your code doesn't run until the DOM is ready.

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

You can give the .hover()methodtwo functions if you prefer. Then I'd use the .show()and .hide()methods instead of .toggle().

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

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

回答by mway

Do this:

做这个：

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

You may want to consider just using $.addClass()and $.removeClass(), as it would be much easier to manage.

您可能只想考虑使用$.addClass()and $.removeClass()，因为它更容易管理。

回答by Dustin Laine

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

回答by Josiah

You could try this:

你可以试试这个：

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

Here's adding a nice fade effect:

这里添加了一个不错的淡入淡出效果：

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

回答by Marek Ka.

Finaly I found super simple solution for my responsive mega dropdown. This is based on html5 data attribute. Only 3 lines! ;)

最后，我为我的响应式大型下拉菜单找到了超级简单的解决方案。这是基于 html5 数据属性。只有3行！;)

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

http://jsfiddle.net/QrEuQ/

http://jsfiddle.net/QrEuQ/