兄弟をホバリングするときにホバー状態を保持するにはどうすればよいですか？

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

混乱を招くクラス名とそれ以上のクラス名を使用して、必要なものを簡単に見つけることができます。