在样式后将鼠标悬停在ul儿童元素效果上

Question

我只能使用 css 来执行此操作，否则使用jQuery吗？

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

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

您也不能为pseudo elements编写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>