將鼠標懸停在按鈕上會顯示div。在顯示的div上如何讓按鈕保持盤旋？

Question

當我的鼠標位於顯示的div（.menu）上時，如何讓按鈕保持懸停（背景：紅色）？

https://jsfiddle.net/on5Lfmoo/

HTML

<button class="logo"> 
    a 
</button> 

<div class="menu"> 
    aaa 
</div> 

CSS

.menu { 
    transform: translateX(-250px); 
    width: 240px; 
    color: white; 
    background: rgba(10,10,10,0.2); 
    height: 100%; 
    position: absolute; 
    transition: linear 0.5s; 
} 

.logo:hover { 
    background: red; 
} 

.logo:hover + .menu, .menu:hover { 
    transform: translateX(0px); 
} 

Answer 1

您將需要使用JavaScript或jQuery的。

這裏是你試圖實現一個工作小提琴：

https://jsfiddle.net/on5Lfmoo/1/

下面的代碼：

$('.logo').mouseenter(function(){ 
 
\t $('.holder').addClass('open'); 
 
}); 
 
$('.holder').mouseleave(function(){ 
 
\t $('.holder').removeClass('open'); 
 
});

.menu { 
 
    transform: translateX(-250px); 
 
    width: 240px; 
 
    color: white; 
 
    background: rgba(10,10,10,0.2); 
 
    height: 100%; 
 
    position: absolute; 
 
    transition: linear 0.5s; 
 
} 
 

 
.open .logo { 
 
    background: red; 
 
} 
 

 
.open .menu { 
 
    transform: translateX(0px); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 
 
<div class="holder"> 
 
    <button class="logo"> 
 
    a 
 
    </button> 
 
    <div class="menu"> 
 
    aaa 
 
    </div> 
 
</div>