将鼠标悬停在该按钮上会显示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/

以下是代码：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;