4

このコードでは 2 つのことがうまくいかないようです。

  1. 小さい方を表示するために、大きい方の DIV をホバーできるようにしたいと考えています。

現状では、小さい DIV にカーソルを合わせた場合にのみ機能します。2. ホバリングをやめても、小さい方の DIV が消えません。

<div class="one">
    <div class="two"></div>
</div>

<div class="one">
    <div class="two"></div>
</div>


.one {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 10px;
    background-color: #CCC;
}
.two {
    position: relative;
    top: 20px;
    left: 20px;
    height: 40px;
    width: 40px;
    background: #333;
}


/* Fade-in text over images */
$(function(){
    $(".two").css("opacity",0).fadeTo(0, 0);
    $(".two").mouseover(function () {
        $(this).fadeTo(200, 1);
    });
    $("two").mouseout(function () {
        $(this).fadeTo(200, 0);
    });
});
4

3 に答える 3

3

jsFiddle デモ

$(".one").on('mouseenter mouseleave',function ( e ) {
      var fade = e.type=='mouseenter'?
      $('.two', this).stop().fadeTo(200, 1):
      $('.two', this).stop().fadeTo(200, 0);
});
于 2012-08-25T17:36:04.390 に答える
3

when hoveringのコンテキスト内で、大きい方の div をターゲットにしてから.one、小さい方の div を変更する必要があります。可視から不可視にフェードする場合、ほとんどの場合、fadeIn/Out を使用して、CSS で要素を設定するだけです。.twothis.onedisplay:none

$(function(){
    $('.one').on({
        mouseenter: function() {
            $(".two", this).fadeIn(200);
        },
        mouseleave: function() {
            $(".two", this).fadeOut(200);        
        }
    });
});​

フィドル

于 2012-08-25T17:27:00.357 に答える
2

これは、より小さいdiv タグ を選択しているためです。

$(function() {
    $(".two").hide();
    $(".one").hover(function() {
        $('.two', this).fadeIn(200);
    }, function() {
        $('.two', this).fadeOut(200);
    });
});

フィドル

于 2012-08-25T17:25:49.773 に答える