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

您应该使用较少混淆的类名称和一些更具体的类名，以便您可以更轻松地找到所需的名称。

如何在徘徊兄弟姐妹时保持悬停状态？

1 个答案: