マウスオーバーで全部メニューが反応してしまう。

Question

liタグhoveで
ピンクの透過背景にフェードで表示し
画像2種をそれぞれタイミングをずらして
上からスライドしてくる動作を実装したいです。
動きはできたのですが、liのhoverで全部のメニューが動作してしまいます。
hoverしたliの下の要素だけ動作するようにするにはどうすればいいでしょうか？

【html】
div#linkList
ul
li
img
div.mask
a
p.txt
p.info
【css】
.maskに透明ピンク
aタグにrelative

【js】
$(function(){
$("#linkList .mask .info, #linkList .mask .txt").css({
position: 'absolute',
top: '-170px',
left: '0'
});
$("#linkList .mask .info").css({
top: '-50px'
});

$("#linkList ul li").hover(function(){
		$("#linkList .mask").css({
			backgroundColor: '#F34EA3'
			}).stop(true).fadeTo(200,0.75);
		$("#linkList .mask .info").stop(true).delay(100).animate({
			top: '169px'
		}, 250);
		$("#linkList .mask .txt").stop(true).delay(400).animate({
			top: '0'
		}, 350);
	},function(){
		$("#linkList .mask").fadeTo(600,0);
		$("#linkList .mask .info, #linkList .mask .txt").stop(true).animate({
			top: '-170px'
		}, 300);
});

});

Answer 1

hover処理を以下のように変更するとどうでしょうか。

$("#linkList ul li").hover(function(){ 
        $(this).find(".mask").css({ 
            backgroundColor: '#F34EA3' 
            }).stop(true).fadeTo(200,0.75); 
        $(this).find(".mask .info").stop(true).delay(100).animate({ 
            top: '169px' 
        }, 250); 
        $(this).find(".mask .txt").stop(true).delay(400).animate({ 
            top: '0' 
        }, 350); 
    },function(){ 
        $(this).find(".mask").fadeTo(600,0); 
        $(this).find(".mask .info, .mask .txt").stop(true).animate({ 
            top: '-170px' 
        }, 300); 
}); 

Comments

[naru-a]

ありがとうございます。
ばっちりでした！
$(this).find()～、覚えておきます！

[orange0190]

少々解説すると、ホバーのイベントが発生したときに $("#linkList .mask")である要素すべてに対して処理を行っていたため、すべてが反応していました。
$(this)は何かのイベントが発生した要素（今回はホバーした要素）に対して用いることができます。ですので、 $(this).find()でホバーが発生した要素の中で対象となる要素を見つけ出し、処理を行うことができます。