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

aaand 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次更改，

一个。您应该为img代码实现p代码和mouseout处理程序的mouseenter处理程序而不是悬停

湾更改.img-quote position: relative;

的css

℃。使用回调方法对fadeIn和fadeOut进行排序，以便img和p标记不会同时显示。

DEMO

当我将鼠标悬停在元素上时，Jquery Hover行为很奇怪

2 个答案: