:hover不能与jquery脚本一起工作

:hover doesn't work with jquery script

本文关键字：脚本 一起 工作 jquery hover 不能      更新时间：2023-09-26

我有一个<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/

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

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

基本上你是强制元素样式为#af0621，之后样式表将不做任何事情来覆盖它(元素样式优先)。

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

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

因为inline css属性比include属性优先级高。当你用jQuery设置它时，它是这样的:style="border-color: #af0621"。尝试在你的css中使用!important:

.profile_nav_item:hover {
     border-color: #af0621 !important;
}
相关文章：