halp halp - 7 months ago 4
Javascript Question

Hovering the button makes appear div. How to make the button stay hovered while being on the appeared div?

How can I let the button stay hovered (background: red) while my mouse is on the appeared 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

You will need to use javascript or jQuery.

Here's a working fiddle of what you were trying to achieve:

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

Here's the code:

$('.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>

Comments