我举了一个我正在处理的问题的简短例子。
Html代码:
<ul class="BB">
<li><a href="1">1</a></li>
<li><a href="2">2</a></li>
<li><a href="3">3</a></li>
</ul>
CSS代码:
.BB a:hover{
color: #000;
}
.BB > li:after {
border-right: 2px solid #DDD;
border-bottom: 2px solid #DDD;
}
问题:
当鼠标位于a:hover时,如何将border-right和border_bottom颜色更改为#000,但只包含我用鼠标指向<li>
的元素<a>
?
我试过像这样的jquery
$('.BB a').hover(function(){
$('ul.BB > li').toggleClass('hov');
}
和CSS
.BB > li.hov:after {
border-right: 2px solid #000;
border-bottom: 2px solid #000;
}
但这样我改变了所有<li>
答案 0 :(得分:2)
首先,伪元素没有content
属性。如果它没有content
属性/值,则伪元素不会显示。
.BB > li:after {
content: '';
border-right: 2px solid #DDD;
border-bottom: 2px solid #DDD;
}
如果要在将鼠标悬停在子li
元素上时更改a
元素的类,则需要在事件处理程序中使用$(this)
。然后,您将使用.parent()
方法 - $(this).parent('li')
。
$('.BB a').hover(function(){
$(this).parent('li').toggleClass('hov');
});
你可能实际上并不需要jQuery来执行任何此操作。你可以使用CSS :hover
伪类:
.BB > li:after {
content: '';
border-right: 2px solid #DDD;
border-bottom: 2px solid #DDD;
}
.BB > li:hover:after {
border-right: 2px solid #000;
border-bottom: 2px solid #000;
}
与此唯一不同的是,当悬停在li
元素而不是a
元素上时,边框的颜色会发生变化,就像在jQuery示例中一样。如果这是一个问题,您还可以将psuedo元素添加到a
元素而不是li
元素:
.BB > li a:after {
content: '';
border-right: 2px solid #DDD;
border-bottom: 2px solid #DDD;
}
.BB > li:hover a:after {
border-right: 2px solid #000;
border-bottom: 2px solid #000;
}