Question

我有一个<ul>，其中每个li都会在:hover上响应。这是css：

.profile_nav_item:hover {
     border-color: #af0621;
}

但是当我点击它们时，它希望这些边框保持颜色。

我有这个jQuery函数：

$('a[rel="tab"]').click(function(e){
        var url = $(this).attr('href');
        $('.profile_nav_item').css('border-color', 'transparent');
        $('.profile_nav_item', this).css('border-color', '#af0621');

但点击后，:hover css属性不再被调用。有谁知道我怎么解决这个问题？

这是小提琴：http://jsfiddle.net/zRJK9/

Answer 1

您需要将CSS属性重置为''（空字符串），以便样式表再次启动。

 $('.profile_nav_item').css('border-color', '');

基本上你将元素样式强制为#af0621，之后样式表将不会覆盖它（元素样式优先）。

将空字符串值传递给css()会删除内联样式设置。

JSFiddle：http://jsfiddle.net/zRJK9/6/

Answer 2

因为内联css属性具有更高的优先级，所以包括一个。因此，当您使用jQuery设置它时，它是这样的：style="border-color: #af0621"。尝试在你的css中使用!important：

.profile_nav_item:hover {
     border-color: #af0621 !important;
}

：hover不适用于jquery脚本

2 个答案:

JSFiddle：http://jsfiddle.net/zRJK9/6/