Show Fade Item as long as cursor is hover it

Question

    $(document).ready(function () {
    	$(".Button").hover(function(){
    		$(".FadeItem").fadeIn("slow");
    	},
    	function(){
        $(".FadeItem").fadeOut();
    	});
    });

     .FadeItem{
    display: none;
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


       <div class="Button">Button</div>
    
    	<div class="FadeItem">
    	
    		<ul>					
    		<li>1.1. Menu </li>
    		<li>1.2. Menu</li>
    		</ul>
    		
    	</div>	

As you can see the simple code above fades in the content of the two list items. The fadein of those two items works perfectly. However, I want that those items stay visible as long as the cursor is on them. Once the cursor goes out they should disappear.

Do you have any idea what I need to change in my code to achieve this?

Answer 1

you will add ul also on hover it will works.

$(document).ready(function () {
$(".Button, ul").hover(function(){
    $(".FadeItem").fadeIn("slow");
},
function(){
$(".FadeItem").fadeOut();
 });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Button">Button
 <div class="FadeItem">

    <ul>                    
    <li>1.1. Menu </li>
    <li>1.2. Menu</li>
    </ul>

 </div> 
</div

.FadeItem {
 display: none;
}

Answer 2

Just changed your HTML a bit and it works great. Move the ul part to inside div which have button text. So when you move out of the whole div, then only it gets invisible.

https://jsfiddle.net/sureshatta/2f21u2qx/3/

$(".Button").hover(function(){
		$(".FadeItem").fadeIn("slow");
	},
	function(){
    $(".FadeItem").fadeOut();
	});

.FadeItem {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Button">Button
  <div class="FadeItem">
    <ul>					
      <li>1.1. Menu</li>
      <li>1.2. Menu</li>
    </ul>
  </div>	
</div>

Answer 3

Keep your .fadeItem block inside your .Button.

$(".Button").hover(function(){
	$(".FadeItem").fadeIn("slow");
},
function(){
    $(".FadeItem").fadeOut();
});

.FadeItem{
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Button">Button
  <div class="FadeItem">
	
		<ul>					
		<li>1.1. Menu </li>
		<li>1.2. Menu</li>
		</ul>
		
	</div>	
 </div>

Answer 4

$(document).ready(function () {
    $(".Button").hover(function () {
        $(".FadeItem").fadeIn("slow");
    },
    function () {
        $(".FadeItem").hover(function () {
            $(".FadeItem").fadeIn("slow");
        },
         function () {
             $(".FadeItem").fadeOut();
         },
           function () {
               $(".FadeItem").fadeOut();
           })
    });


});

.FadeItem{
    display: none;
     }
     
Button:hover,.FadeItem:hover{
display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


       <div class="Button">Button</div>
    
    	<div class="FadeItem">
    	
    		<ul>					
    		<li>1.1. Menu </li>
    		<li>1.2. Menu</li>
    		</ul>
    		
    	</div>

try this one.