Home / Questions / 107585
Accepted
Kenny Barrera
Asked: 2020-10-06 11:03:19 +0800 CST 2020-10-06 11:03:19 +0800 CST

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

  • 772

When the hover event is detected in any of the menus, the options should slide down. When the mouse leaves the options, I'm trying to hide the options, but for some reason it doesn't work. Because? I don't 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>

jquery

2 Answers

  1. Al sub-menu1-containeryou have assigning a z-index-1 which makes it impossible for the mouse to interact with the div because you place it behind every element (even the body).

    Change the value of z-indexto 0 or delete it and it will work perfectly for you:

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

    • 1
  2. Best Answer

    Well reviewing your code the problem is in you cssand not in your js, it turns out that div.sub-menu1-containeryou are assigning a z-index: -1, thanks to that z-indexnegative you divwill be left behind absolutely all the elements of the site including the label bodyis for such a reason that mouseouthe never knows it will execute because you are never really going outside the limits of div, I don't 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>

    • 1