javascript - 将鼠标悬停在按钮上会出现 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。

这是您要实现的目标的工作 fiddle :

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

代码如下:

$('.logo').mouseenter(function(){
	$('.holder').addClass('open');
});
$('.holder').mouseleave(function(){
	$('.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>