Jquery 和 jquery UI mouseover/mouseout 闪烁问题

Question

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

当您将 li 元素内的鼠标位置从 li 元素本身更改为其中的 .desc 元素时，我正试图摆脱这种“闪烁”。上面的例子应该足够清楚。我希望你能帮助我。谢谢。

Answer 1

使用mouseenter() 和mouseleave()

关于 jQuery 事件：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>

或使用.hover()

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

工作演示http://jsfiddle.net/f872skxp/