html - 悬停 sibling 时如何保持悬停状态？

Question

// HTML
<nav _v-2e9e2f12="">
  <ul _v-2e9e2f12="">
    <li _v-2e9e2f12="">
      <a _v-2e9e2f12=""></a>
    </li>
    <ul tabindex="-1" _v-0078ee36="" _v-2e9e2f12="" class="menu" style="top: 30px; left: 35px">
      <li _v-0078ee36=""><a _v-0078ee36="">Split up</a></li>
      <li _v-0078ee36=""><a _v-0078ee36="">Split down</a></li>
    </ul>
  </ul>
</nav>

// CSS
nav > ul li[_v-2e9e2f12]:hover {
  z-index: 9999;
  -webkit-transform: translate(3px);
  transform: translate(3px);
}

现在，我想在 <ul tabindex="-1" _v-0078ee36=""> 时保留悬停状态悬停。

如何实现？

这是 JSFiddle:https://jsfiddle.net/u868Lazf/1/

(注意:我也对 jQuery 解决方案持开放态度)

Answer 1

不完美但是一个解决方案:

jQuery:

$('ul li[_v-0078ee36]:first-child').hover(function(){
    $(this).parent().parent().find('li[_v-2e9e2f12]').addClass('up');
},function(){
    $(this).parent().parent().find('li[_v-2e9e2f12]').removeClass('up');
});
$('ul li[_v-0078ee36]:last-child').hover(function(){
    $(this).parent().parent().find('li[_v-2e9e2f12]').addClass('down');
},function(){
    $(this).parent().parent().find('li[_v-2e9e2f12]').removeClass('down');
});

CSS:

nav > ul li[_v-2e9e2f12].up {
  z-index: 9999;
  -webkit-transform: translate(0,-3px);
  transform: translate(0,-3px);
}

nav > ul li[_v-2e9e2f12].down {
  z-index: 9999;
  -webkit-transform: translate(0,3px);
  transform: translate(0,3px);
}

您应该使用不那么容易混淆的类名，并使用一些更具体的类名，这样您就可以更轻松地找到所需的类名。