jQuery - 具有相同類的目標特定元素

我是jq的新手，如果我不夠清楚，請原諒我。jQuery - 具有相同類的目標特定元素

小提琴：

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'); 


    }); 
});

來源

2013-03-30 user1339164

試試這個：

$(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-30 19:11:26

感謝那 – user1339164

很高興它幫助！ –

內部事件處理程序，使用$(this)代替$(".hover")。

這將只對接收事件的元素進行操作，而不是對所有元素進行操作。由jQuery設置爲this是觸發事件的元素。

$('.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-30 18:59:26 jfriend00

試圖完全一樣，但不會爲我做 – user1339164

@ user1339164 - 請參閱我在答案末尾添加的評論，因爲您有邏輯問題。如果您在鼠標離開時滑動，則無法再次將元素重新滑動，因爲您無法懸停不可見的元素。您需要更清楚地解釋您在設計中要完成的任務。 – jfriend00

@ user1339164 - 改變你的邏輯後（有些元素不會被隱藏），你可以看到它在這裏工作：http://jsfiddle.net/jfriend00/6Szyb/ – jfriend00

jQuery - 具有相同類的目標特定元素

回答

相關問題