javascript - 鼠标悬停在 ul 子元素效果 ul 之后的样式

Question

我是否可以仅使用 css 或 jQuery 来做到这一点？

如果我将鼠标悬停在 ul 中的第一个 li 上，想要定位 ul:after。

ul.secondary:after {
    border-color: #f3f4f1 transparent;
    border-width: 0 8px 8px;
    right: 11px;
    top: 0;
    left: 0;
    border-style: solid;
    content: "";
    position: absolute;
} 

/*this is not working*/
ul.secondary li:first-child a:hover + ul.primary ul.secondary::after {
      border-color: #9caa9c transparent; 
}


ul.secondary li:first-child a:hover {
      color: red;
}

<ul class="primary">
  <li>
      <ul class="secondary">
          <li><a href="">hover me makes ":after" change border color</a></li>
          <li><a href="">text</a></li>
          <li><a href="">text</a></li>
          <li><a href="">text</a></li>
          <li><a href="">text</a></li>
      </ul>
  </li>
</ul>

Answer 1

您也不能为伪元素 编写jquery。但是你可以做这样的事情。我添加了 content:"hi" 而不是 content:"" 来向您展示它是如何在 :after 中工作的。

$('.secondary>li:first-child>a').mouseover(function(){
  $('.secondary').addClass('hover');
  //You can write whatever you want in here
});
$('.secondary>li:first-child>a').mouseout(function(){
  $('.secondary').removeClass('hover');
  //You can write whatever you want in here
});

ul.secondary:after {
  content:"";
  border-color: #f3f4f1 transparent;
  border-width: 0 8px 8px;
  right: 11px;
  top: 0;
  left: 0;
  border-style: solid;
  position: absolute;
}
ul.secondary li:first-child a:hover {
  color: red;
}
ul.secondary.hover:after {
    border-color: red transparent;
}
ul.secondary.hover>li{
   color:black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<ul class="primary">
  <li>
    <ul class="secondary">
      <li><a href="">hover me makes ":after" change border color</a> </li>
      <li><a href="">text</a></li>
      <li><a href="">text</a></li>
      <li><a href="">text</a></li>
      <li><a href="">text</a></li>
    </ul>
  </li>
</ul>