mouseover() 和 slideDown 需要 jQuery 帮助

Question

所以我正在尝试使用 HTML、CSS 和 jQuery 处理一些小东西。我正在尝试做的一件事是，每当我将鼠标悬停在 div 上时，它就会向下滑动。我现在拥有的代码如下所示:

$(document.ready(function(){
     $('div').mouseover(function(){
           $('div').slideDown('slow');
     };
     $('div').mouseout(function(){
           $('div').slideUp('slow');
     });
});

但是，由于某些原因，这似乎不起作用。假设所有内容都已正确链接，并且 CSS 和其他所有内容都已正确编码。只有当 mouseover() 和 mouseout() 在代码中时，它才会开始出错。有人能告诉我为什么吗？当另一个顶部有一个“trigeger”div 时，我可以让它工作，这样当鼠标悬停在“trigger”div 上时，底部的那个就会向下滑动。任何有关使一个 div 向下滑动的帮助将不胜感激。

谢谢!

Answer 1

如前所述，第一个处理程序末尾缺少右括号。

在您的处理程序中，您应该使用 $(this) 来引用触发事件的元素，而不是文档的所有 div:

$(document.ready(function(){
     $('div').mouseover(function(){
           $(this).slideDown('slow');
     });
     $('div').mouseout(function(){
           $(this).slideUp('slow');
     });
});

我还建议您处理一个比 div 更具体的选择器……这样一个令人困惑的选择器会使您的页面陷入“无法更改任何内容”的状态。使用这样的标记:

<div class="hover-effect">
    <!--  content -->
</div>

你可以有这样的东西:

$('.hover-effect').mouseover(/* ... */);
$('.hover-effect').mouseout(/* ... */);

---

更新:

根据您提供的 jsfiddle，您基本上是在尝试处理未显示的 div 上的鼠标悬停事件。您的代码完全按预期工作。如果您打棒球，您肯定会经历一段史诗般的时光，在球还没有被扔出去的时候就尝试击球。

首先，您需要一个始终具有一定宽度和高度的容器。确保这一点的一种方法是为容器设置顶部填充。在该容器内，您的 slider 可以随心所欲地滑动，而不会达到“无”状态。为了自由指针效果的好处，我假设它旨在显示为链接。

试试这个:

HTML

<a class="slider-container" href="#">
    <div class="slider"></div>
</a>

CSS

.slider-container {
    display:block;
    width:100px;
    padding-top:25px;
    background-color:#000000;
}

.slider {
    width: 100px;
    height: 100px;
    background-color:#000000;
    display:none;
}

JQUERY

$(document).ready(function(){
    var $slider_container=$('.slider-container');

    $slider_container.mouseover(function(){
        $('.slider',this).stop().slideDown('slow');
    });

    $slider_container.mouseout(function(){
        $('.slider',this).stop().slideUp("slow");
    });
});

看看这个工作FIDDLE