用jQuery的css()方法修改样式后css样式里hover失效该怎么解决

Question

.A1 a:link {
    width: 20px;
    height: 20px;
    background-color: #FF8000;
    border-radius: 23px;
    border: 3px solid #FFFFFF;
    position: absolute;
}
.A1 a:visited {
    width: 20px;
    height: 20px;
    background-color: #FF8000;
    border-radius: 23px;
    border: 3px solid #FFFFFF;
    position: absolute;
}
.A1 a:hover {
    width: 20px;
    height: 20px;
    background-color: #FF8000;
    border-radius: 23px;
    border: 3px solid #FFFFFF;
    position: absolute;
}

以上是css样式

	$(document).ready(function() {
	    $(".B1").hover(function() {
	        $(".A a:link").css("background-color", "red");
	    }, function() {
	        $(".A a:link").css("background-color", "#FF8000");
	    });
	});

这是jQuery语句

因为需要同时A1和B1来改变A1的样式.所以用jQuery写了B1改变A1的方法.但是B1hover触发后会导致A1的hover失效.

应该是优先级之类的问题,但是请问如何解决

-------------------------------------------------------------------------------------------------------------------------

问题解决了,在css的hover中加入!important即可//

话说没法把问题删了吗

Answer 1

说一说你写的样式的问题： 每个状态都有宽高，为什么不写在一个里呢？a标签虽然有这么多状态，可是并不是每个状态的样式我们都需要写一遍，可以统一写为：.A1 a {     width: 20px;     height: 20px;     background-color: #FF8000;     border-radius: 23px;     border: 3px solid #FFFFFF;     position: absolute; }一旦状态不同要做区分的时候，比如hover的时候背景颜色要变红，你就可以这样写：.A1 a {         width: 20px;         height: 20px;         background-color: #FF8000;         border-radius: 23px;         border: 3px solid #FFFFFF;         position: absolute; } .A1 a:hover{     background-color:red; }

Answer 2

hover只能改变触发节点的样式或者触发节点的子元素的样式，不能改变其他节点的样式。建议使用mouseenter和mouseleave

Answer 3

不是优先级的问题，你没有理解hover这个方法的用法,这个方法只能触发节点的样式或者触发节点的子元素