用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这个方法的用法,这个方法只能触发节点的样式或者触发节点的子元素