jquery 'hover mouseover' 函数跳跃答案

【问题标题】：jquery 'hover mouseover' function jumpyjquery 'hover mouseover' 函数跳跃
【发布时间】：2015-09-18 22:38:19
【问题描述】：

这是我的 html 和 jquery 代码，当将鼠标悬停在 img1 上时，会显示 content_hidden_popout，但仍然在 img1 上并在其周围移动真的很跳跃，就像它向下停留直到鼠标悬停不再在 img1 上。

$(document).ready(function(){
    $(".img1").on('hover mouseover', function() {
        //alert('test');
        $(".content_hidden1").show();
        $(".content_hidden2, .content_hidden3, .content_hidden4, .content_hidden5, .content_hidden6, .content_hidden7, .content_hidden8, .content_hidden9, .content_hidden10").hide();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<li>
    <img class="img1" src="<?php echourl(); ?>/images/slider/1.png" />
    <div class="content_hidden1 content_hidden_popout">
        <h3>Schools</h3>
        <p>text, text, text</p>
        <a href="<?php echo get_permalink( 63 ); ?>">
            <img class="learn-more" src="<?php echourl(); ?>/images/learn-more.png">
        </a>
    </div>
</li>

【问题讨论】：

标签： jquery html css hover mouseover

【解决方案1】：

jQuery 的.hover() 有两个事件处理程序的选项。一种用于mouseover，另一种用于mouseout。

但它跳动的真正原因是当您将鼠标悬停在图像上时，弹出框将显示在图像前面。这意味着您不再将鼠标悬停在图像上，因此图像被隐藏，这导致您再次将鼠标悬停在图像上，等等...

要解决此问题，请将事件处理程序应用于父元素。

$(document).ready(function(){
    $(".img1").parent().hover(
        function() {
            $(".content_hidden_popout").hide();
            $(".content_hidden_popout", this).show();
        },
        function() {
            $(".content_hidden_popout").hide();
        }
    );
});

【讨论】：

【解决方案2】：

你最好使用这种形式的代码：

$("selector").hover(
   function()
   {
       $(this).show();
   },
   function()
   {
       $(this).hide();
   });

这是hover() 函数的一个特殊属性，它允许使用以逗号分隔的两个function()(s)。因为mouseenter()和mouseleave()一起使用是很常见的，反复写可以让代码变大。

并且最好不要以您使用的方式使用show()和hide()。

【讨论】：