0

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

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

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

谢谢！

4

3 回答 3

0

正如 Frederik 所指出的，您不能针对隐藏在 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");
    });
于 2013-07-27T08:00:15.440 回答
0

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

在您的处理程序中，您应该使用$(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;
}

查询

$(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

于 2013-07-26T22:32:21.500 回答
0

您缺少括号mouseover()

$(document.ready(function(){
     $('div').mouseover(function(){
           $('div').slideDown('slow');
     });
     $('div').mouseout(function(){
           $('div').slideUp('slow');
     });
});
于 2013-07-26T22:28:06.917 回答