Question

我有一个容器元素，里面有其他元素。如果我将鼠标移到这个包装元素上，我想淡化位于此元素内的<div>元素，并在鼠标离开包装器时淡入淡出。我的问题是fadeIn和fadeOut似乎被多次调用，因为当我移入或移出鼠标时，元素开始闪烁（淡入和淡出几次）。这是我的源代码：

<div class="panel_body">
   <div class="chb_input_row">
      <div class="row_wrapper">
         <label>user</label>
         <input type="hidden" value="1" name="user_profiles">
         <input type="checkbox" value="1" name="user_profiles">
         <div class="description">
            <div class="tool_tip tool_tip_animated tool_tip_after" style="display:none;">Something</div>
         </div>
      </div>
   </div>
</div>



$(document).ready(function(){    
    $(".chb_input_row").each(function(){
        $(this).mouseover(function(){
            $(this).find('.tool_tip_animated').fadeIn();
        });

        $(this).mouseout(function(){
            $(this).find('.tool_tip_animated').fadeOut();
        });
    });
});

所以我想要的是当.chb_input_row触发鼠标悬停操作时使.tool_tip_animated淡入淡出，反之亦然。

我尝试了jQuery的hide()和animate()方法但没有人正常工作。

Answer 1

问题是当鼠标移动到子元素时，mouseover和mouseout事件将会触发。解决方案是分别使用mouseenter和mouseleave事件。

您可以使用hover()实用程序功能执行此操作

$(document).ready(function () {
    $(".chb_input_row").hover(function () {
        $(this).find('.tool_tip_animated').fadeIn();
    }, function () {
        $(this).find('.tool_tip_animated').fadeOut();
    });
});

Answer 2

尝试使用mouseenter代替mouseover：

$(this).mouseenter(function(){
    $(this).find('.tool_tip_animated').fadeIn();
});

当鼠标到达容器时，它只会触发一次

jQuery触发fadeIn和fadeOut问题

2 个答案: