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つの変更を行う必要があると思います。

a. ホバーの代わりに、タグの mouseenter ハンドラーとタグの mouseout ハンドラーを実装する必要がありimgますp

b. のCSSを変更.img-quote position: relative;

c. タグとタグが同時に表示されないように、シーケンスfadeInとfadeOutコールバック メソッドを使用します。imgp

デモ

于 2012-03-12T20:57:19.963 に答える