jquery 'hover mouseover' 函数跳动

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

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

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

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

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

Answer 2

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

jquery 'hover mouseover' 函数跳动

jquery 'hover mouseover' function jumpy

jquery

html

css

hover

mouseover