jquery - 使用 :after 使用 jquery 更改样式

Question

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

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 但只有元素 <li> 时，如何将 border-right 和 border_bottom 颜色更改为 #000其中包含 <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>

Answer 1

首先，伪元素没有content 属性。如果它没有 content 属性/值，伪元素将不会显示。

.BB > li:after {
    content: '';
    border-right: 2px solid #DDD;
    border-bottom: 2px solid #DDD;
}

如果你想在悬停在子a元素上时改变li元素的类，你需要使用$(this) 在事件处理程序中。然后，您将使用 .parent() 方法遍历 DOM - $(this).parent('li')。

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 元素上时，边框的颜色会发生变化，而不是像 jQuery 示例中那样，悬停在 a 元素上。如果这是一个问题，您还可以将伪元素添加到 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;
}