Q:

Jquery and jquery UI mouseover/mouseout blinking issue

$(document).ready(function() {
  
  $(".desc").hide();
  
  $(".products li").mouseover(function() {
   $( this ).find( '.desc' ).show("fade");
 });
  
   $(".products li").mouseout(function() {
   $( ".desc" ).hide("fade");
    });
 
    });
  
.products li{
    width: 300px;
    height: 300px;
    border: 1px solid #808080;
    display: inline-block;
    margin: 5px;
    transition: height 0.5s ease;
    padding: 0px;
    overflow: hidden;
    background-size: 300px;
    margin-left: -15px;
    margin-right: 25px;
}
.products li p.desc {
    background:#e4e4e4;
    width: 280px;
    height: 100px;
    margin: 0px;
    padding: 5px;
    position: relative;
    top: 200px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: justify;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

<ul class="products">
        <li><p class="desc">Short Description</p>
          <li><p class="desc">Short Description</p>

    </ul>

I'm trying to get rid off this "blink" when You change mouse position inside li element from li element itself to .desc element inside it. Example above should make it clear enough. I hope You can help me. Thx.

A:

use mouseenter() and  mouseleave()
about jQuery Events: MouseOver / MouseOut vs. MouseEnter / MouseLeave

$(document).ready(function() {
  
  $(".desc").hide();
  
  $(".products li").mouseenter(function() {
   $( this ).find( '.desc' ).show("fade");
 });
  
   $(".products li").mouseleave(function() {
   $( ".desc" ).hide("fade");
    });
 
    });
.products li{
    width: 300px;
    height: 300px;
    border: 1px solid #808080;
    display: inline-block;
    margin: 5px;
    transition: height 0.5s ease;
    padding: 0px;
    overflow: hidden;
    background-size: 300px;
    margin-left: -15px;
    margin-right: 25px;
}
.products li p.desc {
    background:#e4e4e4;
    width: 280px;
    height: 100px;
    margin: 0px;
    padding: 5px;
    position: relative;
    top: 200px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: justify;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

<ul class="products">
        <li><p class="desc">Short Description</p>
          <li><p class="desc">Short Description</p>

    </ul>

or use .hover()
  $(".products li").hover(function() {
   $( this ).find( '.desc' ).show("fade");
    },function() {
   $( ".desc" ).hide("fade");
    });

working demo http://jsfiddle.net/f872skxp/

