当我把鼠标放在元素上时，Jquery Hover的行为很奇怪

Question

我有以下html:

<div id="join-us-subheader-imgs">
    <div class="subheader-img-wrapper">
      <img src="/wp-content/themes/lib/join_us/join-us_1.png">
      <p class="img-quote">"This is a quote example. And there's more text here."</p>
    </div>
    <div class="subheader-img-wrapper">
      <img src="/wp-content/themes/lib/join_us/join-us_2.png">
      <p class="img-quote">"This is a quote example. And there's more text here."</p>
    </div>
</div>

和css：

.subheader-img-wrapper {
    float: left;
    margin-right: 10px;
    position: relative;
}
.subheader-img-wrapper img:hover{
    cursor: pointer;
}
.img-quote {
    display: none;
    width: 125px;
    height: 80px;
    position: absolute;
    top: 0;
}

aa和javascript：

$(document).ready(function() {
    $(".subheader-img-wrapper").hover(
        function(){
            $(this).find('img:first').fadeOut("slow", function(){           
                $(this).parent().find('p:first').fadeIn("slow");
            });
        },
        function(){
            $(this).find('p:first').fadeOut("slow", function() {            
                $(this).parent().find('img:first').fadeIn("slow");
            });
        }
    );
});

问题是，当我把鼠标放在第一个上面时，它开始进出悬停功能，就像我

Answer 1

发生这种情况是因为当.fadeOut函数结束时，元素会接收到mouseout事件，从而触发您的其他函数。。

Answer 2

我认为你需要做3个更改，

a。您应该为img标签实现mouseenter处理程序，为p标签实现mouseout处理程序，而不是悬停

b。更改.img-quote position: relative; 的css

c。使用回调方法对fadeIn和fadeOut进行排序，这样img和p标签就不会同时显示。

DEMO