CODEWITHSUNDEEP
jqueryjquery-uimouseovermouseout
Jakub M
Jakub M

Reputation: 59

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.

Upvotes: 1

Views: 893

Answers (1)

Alien
Alien

Reputation: 3668

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/

Upvotes: 1

Related Questions