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

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

Answer 3

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

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

Answer 5

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

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

http://jsfiddle.net/QrEuQ/

JQuery在悬停时显示Div

5 个答案: