这听起来很简单但我似乎无法使其发挥作用。
我试图让我的列表只有当用户在其上方悬停时才有滚动效果。
当我将鼠标悬停在列表上方时,这些类不会更改,滚动条也不会出现。
我有以下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(...
如果有人能在这里提供任何帮助,请感到高兴。谢谢。理解
答案 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。
干杯