Question

我正在尝试拥有一个与Twitter推文区域相似的元素。鼠标悬停时DIV应该是不同的颜色，背景图像的新位置。

然后，当用户单击背景图像时，位置应再次移动，并且背景颜色应仅在用户未悬停时更改。我尝试了这个，但它不起作用。

JS -

function reviews(id) {
    $('#reviews .review').removeClass('ractive');
    $(id).addClass('ractive');
}

CSS -

#reviews .review {
    font-family:"Lucida Grande", Arial, sans-serif;
    display:block;
    width:599px;
    padding-right:30px;
    background:url(images/ui/arrows.png) -60px -60px no-repeat;
}
#reviews .review:hover {
    background-position:605px 50px; 
    background-color:#E6F5F5;
    }
#reviews .review .ractive {
    background-color:#E2E2E2;
    background-position:605px -100px; 
}
#reviews .review .ractive:hover {
    background-color:#E6F5F5;
    background-position:605px -100px; 
}

HTML

<div class="review" onclick="reviews(this);">Blah Blah Blah Blah</div>

任何想法都有问题。新类不会应用于元素。

非凡

Answer 1

$(id).addClass('ractive');

没有得到合适的选择器。从您的标记开始，您应该这样做。

$('.review').click(function() {
    $(this).addClass('ractive');
});

然后，您应该从标记中删除onclick="reviews(this);。如果您使用jquery来应用类，请始终坚持使用该方法。不要混淆突兀和unobtrusive javascript。上面发布的代码会将ractive类仅添加到您点击的链接中。

另外，将您的CSS从#reviews .review .ractive更改为#reviews .ractive。你所拥有的课程正在寻找一个内部审查的元素与类ractive，你不需要那个，因为类在同一个元素上

#reviews .review:hover {
    background-position:605px 50px; 
    background-color:#E6F5F5;
    }
#reviews .ractive {
    background-color:#E2E2E2;
    background-position:605px -100px; 
}
#reviews .ractive:hover {
    background-color:#E6F5F5;
    background-position:605px -100px; 
}

JQuery添加类功能无法正常工作

1 个答案: