jQueryのホバー上のCSSセレクタの子を変更する

Question

この基本的なjQueryコードを使って、どうすればいいですか？mousoutアイテムをdisplay:noneに戻しますか？

これも改善できますか？

すべてのヘルプ

$(".image").hover(function() { 
     $(this).children(".image p").css({ display: 'inline' }); 
}); 

私はこれを見たjQueryのドキュメントサイトで

してください：$(selector).hover(handlerIn, handlerOut)が、私はここでそれを適用する方法を理解していません。

Answer 1

$(".image").hover(function() { 
     $(this).children(".image p").show(); 
}, function() { 
     $(this).children(".image p").hide(); 
}); 

をしかし、なぜそれを純粋なCSSを使用しない：LSOがトグルするのではなく、これを行いますか？

.image:hover .image p { display:inline; } 

Answer 2

あなたがイベントをテストする場合は、2つの機能を必要としない：

$(".image").hover(function(e) { 
     $(this).children("p").toggle(e.type === 'mouseenter'); 
}); 

ここでデモです：http://jsfiddle.net/U5QGU/

あなたが必要としないので、私はまた、セレクタを簡素化：

.image p 

を

親が既に画像を持っていることがわかっているので、

$(".image").hover(function(e) { 
     $(this).children("p")[e.type === 'mouseenter' ? 'show' : 'hide'](); 
}); 

http://jsfiddle.net/U5QGU/1/

Answer 3

ThiefMasterも正しいですが、あなたはそれを求めて、これは正確である：

$(".image").hover(function() { 
     $(this).children(".image p").css({display:'inline'}); 
}, function() { 
     $(this).children(".image p").css({display:'none'}); 
}); 

Answer 4

を子供たちを使用する代わりに、セレクタのコンテキストを提供することである。

$(".image").hover(function() { 
    $("p", this).css({ display:'visible' }); 
}, function() { 
    $("p", this).css({ display:'none' }); 
}); 

シングルを使用するにはシュレッダーの提案による機能：

$(".image").hover(function(e) { 
    var d = (e.type === 'mouseenter') ? 'visible' : 'none'; 
    $("p", this).css({ display: d }); 
});