What is the correct use of mouseout () in Jquery?

Navigation
2

When the hover event is detected in any of the menus, the options must scroll down. When the mouse exits the options, I'm trying to hide those options, but for some reason it does not work. Why? I do not see anything wrong with the implementation of mouseout () in my code. 

$(document).ready(function() {
    
    $(".level1-option").hover(function(){
    	$(".sub-menu1-container").slideDown();
    });

    $(".sub-menu1-container").mouseout(function(){
    	$(".sub-menu1-container").slideUp();
    });

});
* {
	padding: 0;
	margin: 0;
}

.header {
	background: white;
	height: 147px;
	box-shadow: 1px 1px 15px grey;
	position: relative;
}

.header-menu {
	color: grey; 
	position: absolute; 
	right: 100px; 
	bottom: 20px;
}

.level1-option {
	padding: 0 10px;
	display: inline-block;
	color: grey;
}

.level1-option:hover {
	color: #e6b800;
	cursor: all-scroll;
}

.sub-menu1-container {
	margin: 0 5%;
	background: white;
	height: 337px;
	box-shadow: 1px 1px 15px #8f8a8a;
	position: relative;
	z-index: -1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
  <script src="jquery-3.2.1.min.js"></script>
  <script src="jquery.js"></script>
</head>
<body>
<div class="header">
    <div class="header-menu">
      <ul style="list-style: none;">
        <li class="level1-option">option 1</li>
        <li class="level1-option">option 2</li>
        <li class="level1-option">option 3</li>
        <li class="level1-option">option 4</li>
        <li class="level1-option">option 5</li>
        <li class="level1-option">option 6</li>
      </ul>
    </div>
</div>

<div class="sub-menu1-container" hidden>

</div>
  
</body>
</html>
    
asked by Kenny Barrera 05.10.2017 в 21:03
source

2 answers

1

Well reviewing your code the problem is in your css and not in your js , it turns out that the div.sub-menu1-container you are assigning a z-index: -1 , thanks to that z-index negative% your div goes to be behind absolutely all the elements of the site including the tag body is for this reason that the mouseout is never going to run because you really never out of the limits of div , I do not know if I make myself understand but in summary your solution is to remove that z-index : 

$(document).ready(function() {
    
    $(".level1-option").hover(function(){
    	$(".sub-menu1-container").slideDown();
    });

    $(".sub-menu1-container").mouseout(function(){
    	$(".sub-menu1-container").slideUp();
    });

});
* {
	padding: 0;
	margin: 0;
}

.header {
	background: white;
	height: 147px;
	box-shadow: 1px 1px 15px grey;
	position: relative;
}

.header-menu {
	color: grey; 
	position: absolute; 
	right: 100px; 
	bottom: 20px;
}

.level1-option {
	padding: 0 10px;
	display: inline-block;
	color: grey;
}

.level1-option:hover {
	color: #e6b800;
	cursor: all-scroll;
}

.sub-menu1-container {
	margin: 0 5%;
	background: white;
	height: 337px;
	box-shadow: 1px 1px 15px #8f8a8a;
	position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
  <script src="jquery-3.2.1.min.js"></script>
  <script src="jquery.js"></script>
</head>
<body>
<div class="header">
    <div class="header-menu">
      <ul style="list-style: none;">
        <li class="level1-option">option 1</li>
        <li class="level1-option">option 2</li>
        <li class="level1-option">option 3</li>
        <li class="level1-option">option 4</li>
        <li class="level1-option">option 5</li>
        <li class="level1-option">option 6</li>
      </ul>
    </div>
</div>

<div class="sub-menu1-container" hidden>

</div>
  
</body>
</html>
    
answered by 05.10.2017 / 21:15
source
1

At sub-menu1-container you have a z-index of -1 which makes it impossible for the mouse to interact with the div because you put it behind every element (including the body).

Change the value of z-index to 0 or delete it and it will work perfectly: 

$(document).ready(function() {
    
    $(".level1-option").hover(function(){
    	$(".sub-menu1-container").slideDown();
    });

    $(".sub-menu1-container").mouseout(function(){
    	$(".sub-menu1-container").slideUp();
    });

});
* {
	padding: 0;
	margin: 0;
}

.header {
	background: white;
	height: 147px;
	box-shadow: 1px 1px 15px grey;
	position: relative;
}

.header-menu {
	color: grey; 
	position: absolute; 
	right: 100px; 
	bottom: 20px;
}

.level1-option {
	padding: 0 10px;
	display: inline-block;
	color: grey;
}

.level1-option:hover {
	color: #e6b800;
	cursor: all-scroll;
}

.sub-menu1-container {
	margin: 0 5%;
	background: blue;
	height: 337px;
	box-shadow: 1px 1px 15px #8f8a8a;
	position: relative;
	z-index:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
  <script src="jquery-3.2.1.min.js"></script>
  <script src="jquery.js"></script>
</head>
<body>
<div class="header">
    <div class="header-menu">
      <ul style="list-style: none;">
        <li class="level1-option">option 1</li>
        <li class="level1-option">option 2</li>
        <li class="level1-option">option 3</li>
        <li class="level1-option">option 4</li>
        <li class="level1-option">option 5</li>
        <li class="level1-option">option 6</li>
      </ul>
    </div>
</div>

<div class="sub-menu1-container" hidden>

</div>
  
</body>
</html>
    
answered by 05.10.2017 в 21:15
Management of "Enum" in javascript? [closed] Error when comparing if: "java: bad operand types for binary operator"