Question

所以我正在尝试使用HTML，CSS和＆amp ;; 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

您在mouseover()

上缺少括号

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

Answer 2

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

在处理程序中，您应该使用$(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上处理mouseover事件。您的代码完全按预期工作。如果你打棒球，你肯定会有一个史诗般的时间试图在没有投球的情况下击球。

首先，你需要一个总是有一些宽度和高度的容器。确保这一点的一种方法是设置容器的顶部填充。在该容器内，您的滑块可以根据需要滑动，而不会达到“无”状态。为了获得免费指针效果的好处，我认为它应该显示为一个链接。

试试这个：

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

Answer 3

正如弗雷德里克所指出的那样，你无法定位隐藏在DOM中的东西。简化的答案是让另一个元素充当mouseover和mouseout事件的触发器，如下所示：

HTML

<div id="trigger">Hover Me</div>
<div id="slider"></div>

CSS

#slider {
  display: none; /* etc */
}

的jQuery

    $("#trigger").mouseover(function(){
        $('#slider').slideDown("slow");
    });
    $("#trigger").mouseout(function(){
        $('#slider').slideUp("slow");
    });

mouseover（）和slideDown需要jQuery帮助

3 个答案: