0

私は十分に明確でない場合はすみません。

フィドル:

http://jsfiddle.net/tWHpA/1/

ホバーすると、両方の div が上にスライドします。ホバーされている div のみをスライドさせるにはどうすればよいですか?

html:

<div class="span1 green 1"><div class="hover">tile title</div><a href="#page2" rel="ajax"></a></div>
<div class="green 2"><div class="hover">tile1 title</div></div>

CSS:

.green {width: 100px; height: 100px; background: red; color: white; position: relative; z-index:100;}      
.hover {width: 100px; height: 50px; background: yellow; position: absolute; bottom:0; display:none; z-index:-1;   }

jq:

$(document).ready(function() {

    $('.green').addClass('.hover');


   $('.green').hover(function() {

          $('.hover').stop(true, true).slideDown('1000')

    },

    //Mouseout, fadeOut the hover class


    function() {

        $('.hover').stop(true, true).slideUp('1000');

    }).click(function() {

        //Add selected class if user clicked on it
        $(this).addClass('selected');


    });
});
4

2 に答える 2

3

イベント ハンドラー内では、$(this)代わりに を使用し$(".hover")ます。

これは、すべての要素ではなく、イベントを受信して​​いる要素のみで動作します。 thisイベントをトリガーした要素になるように jQuery によって設定されます。

$('.green').hover(function() {
    $(this).stop(true, true).slideDown('1000')
},function() {
    $(this).stop(true, true).slideUp('1000');
}).click(function() {
    //Add selected class if user clicked on it
    $(this).addClass('selected');
});

論理的な問題があると思いますが、上にスライドすると要素がホバーされなくなると、マウスをもう一度その上に置いてドロップダウンさせる方法がないためです。

ロジックを少し変更した後、ここで動作することがわかります: http://jsfiddle.net/jfriend00/6Szyb/

于 2013-03-30T18:59:26.663 に答える
0

これを試して：

$(document).ready(function () {

    $('.green').addClass('.hover');
    $('.green').hover(function () {
        $(this).find('.hover').stop(true, true).slideDown('1000')
    },

    function () {
        $(this).find('.hover').stop(true, true).slideUp('1000');

    }).click(function () {

        //Add selected class if user clicked on it
        $(this).addClass('selected');
    });
});
于 2013-03-30T19:11:26.320 に答える