Question

这听起来很简单但我似乎无法使其发挥作用。

我试图让我的列表只有当用户在其上方悬停时才有滚动效果。

当我将鼠标悬停在列表上方时，这些类不会更改，滚动条也不会出现。

我有以下css类和脚本

CSS

    .business_update_old{font-size:11px;max-height:300px}
    .no_scroll{overflow:hidden}
    .scroll{overflow:auto}

脚本

    $('.business_update_old').hover(function(){
       $(this).removeClass("no_scroll");    
       $(this).addClass("scroll");
    });

PHP

    :
    :
    echo '<div class="business_update_old no_scroll">';
    echo '<ul class="business_updates_new"></ul>';
    :
    foreach(...

如果有人能在这里提供任何帮助，请感到高兴。谢谢。理解

Answer 1

此fiddle表明它正常运作。

首先，您需要确保有足够的内容来填充300px高分区，就像我在小提琴中一样。

另外，为确保滚动条不会粘在一起，您需要使用此jQuery

$('.business_update_old').hover(
function() {
    $this = $(this);
    $this.removeClass("no_scroll")
    $this.addClass("scroll")
}, function() {
    $this.removeClass("scroll")
    $this.addClass("no_scroll");
});

或者，您可以使用CSS完成此操作，完全不需要jQuery。

如果你像这样设置CSS

.business_update_old {
    font-size:11px;
    max-height:300px;
    overflow: hidden;
}
.business_update_old:hover {
    overflow:auto;
}

然后它也会起作用。见this小提琴。

Answer 2

非常简单：

$('.business_update_old').hover(
    function(){
        $(this).removeClass('no_scroll').addClass('scroll');
    }, function() {
        $(this).removeClass('scroll').addClass('no_scroll');
    }
);

如有疑问，check the docs。

干杯

jquery悬停并添加类

2 个答案: