jquery悬停并添加类

时间:2012-05-15 13:10:12

标签: jquery hover addclass

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

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

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

我有以下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(...

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

2 个答案:

答案 0 :(得分: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小提琴。

答案 1 :(得分:1)

非常简单:

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

如有疑问,check the docs

干杯