0

我有以下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");
            });
        }
    );
});

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

4

2 回答 2

0

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

于 2012-03-12T20:45:20.030 回答
0

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

一种。而不是悬停，您应该为标签实现 mouseenter 处理程序和为标签实现imgmouseout 处理程序p

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

C。排序fadeIn和fadeOut使用回调方法，使img和p标签不会同时显示。

演示

于 2012-03-12T20:57:19.963 回答