Question

以下代码不起作用。当鼠标悬停在带有class ='row'的div上时，我想要显示子div。我习惯了JavaScript，但我现在只是调整到jQuery。我该如何做到这一点？

<script type="text/javascript">
$(function() {
$('.block').hide();
$('.row').hover(function() {
$('.block').show();

});

});
</script>
<?php

echo "<div class='row'><div class='block'>one</div></div>";
echo "<div class='row'><div class='block'>two</div></div>";
echo "<div class='row'><div class='block'>three</div></div>";
echo "<div class='row'><div class='block'>four</div></div>";

?>

Answer 1

当任何带有“row”类的元素悬停时，您的代码将显示所有带有“block”类的元素。您需要选择正确的.block元素：

$(function() {
    $('.block').hide();
    $('.row').hover(function() {
        $(this).find('.block').show();
    });
});

这使用.find方法查找与选择器.block匹配的所选元素的后代。

我不确定当鼠标离开.row元素时你打算发生什么，但目前什么都不会发生（事实上，相同的.show行会再次运行，因为这就是发生的事情当只有一个参数传递给.hover时。如果您打算再次隐藏.block元素，则可以向.hover提供另一个参数：

$(function() {
    $('.block').hide();
    $('.row').hover(function() {
        $(this).find('.block').show();
    }, function() {
        $(this).find('.block').hide();
    });
});

或者，您可以坚持使用单个参数，而是使用.toggle方法：

$(function() {
    $('.block').hide();
    $('.row').hover(function() {
        $(this).find('.block').toggle();
    });
});

Answer 2

在悬停功能中，您需要找到当前元素的后代，您可以这样做：

$('.row').hover(function () {
  $(this).find('.block').show();
});

this是当前元素（悬停的.row元素），因此$(this)会创建一个jQuery对象，因此您可以在其上调用jQuery方法。

Answer 3

$('.row').hover(function(event) {
    if (this == event.currentTarget) {
        // run code here
    }

Answer 4

工作示例：http://jsfiddle.net/theom3ga/yPCCn/

您只需使用$(".block", $(this))

解决子块问题

Answer 5

$('.row').hover(function() {
  $('.block',$(this)).show();
});

Answer 6

$('.row').mouseenter( function () { 
    $('.block', this).show();
    $(this).siblings().find('.block').hide(); 
});

在这种情况下，

悬停几乎没有意义，除非您想要完全关闭该块。如果你用鼠标徘徊很远，这种方法可以让最后一行保持打开状态。

http://jsfiddle.net/7SQdu/1/

但是，如果你想在每次鼠标离开时关闭块：

$('.row').hover(  
    function () {
       $('.block', this).show();       
    },
    function () {
       $('.block', this).hide();        
    });

当然它暗示了你的css中的.block {display: none;}。

Answer 7

用户很难对隐藏元素（或非常小的元素）执行鼠标悬停。

将您的代码更改为以下内容：

$(function() {
    $('.block').hide(); // hide all .block elements
    $('.row').bind('mouseover', function() { // bind a mouseover handler
        $(this).find('.block').show();
    }).bind('mouseout', function () { // bind a mouseout handler
        $(this).find('.block').hide();
    });
});

Answer 8

为什么甚至使用JavaScript？为什么不使用CSS呢？（除非你真的需要支持IE 6及以下版本）

CSS:
.row .block { display: none; }
.row:hover .block { display: block; }

HTML:
<div class='row'><div class='block'>one</div></div>
<div class='row'><div class='block'>two</div></div>
<div class='row'><div class='block'>three</div></div>
<div class='row'><div class='block'>four</div></div>

哦，正如@Ben Everard所述，不需要echo

Jquery悬停帮助

8 个答案: