用jquery改变样式:after

时间:2015-02-21 16:30:51

标签: jquery css

我举了一个我正在处理的问题的简短例子。

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>

1 个答案:

答案 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')

来横向DOM

Example Here

$('.BB a').hover(function(){
  $(this).parent('li').toggleClass('hov'); 
});

没有jQuery:

你可能实际上并不需要jQuery来执行任何此操作。你可以使用CSS :hover伪类:

Example Here

.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元素:

Example Here

.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;
}