Question

这是我的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>

Answer 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();
        }
    );
});

Answer 2

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

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

这是hover()函数的一个特殊属性，它允许使用以逗号分隔的两个function()（s）。这是因为将mouseenter()和mouseleave()一起使用是很常见的，重复编写它们会使代码更大。

以您使用的方式使用show()和hide()，最好不推荐使用。

jquery'悬停鼠标悬停'功能跳跃

2 个答案: