Сменить селектор CSS на зависание в jQuery

Question

С помощью этого базового кода jQuery ниже, как бы я сделал на mousout, измените элемент на display:none?

Также это может быть улучшено?

Любая помощь, пожалуйста,

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

На DOCS сайте JQuery я видел это: $(selector).hover(handlerIn, handlerOut), но я не понимаю, как применять его здесь.

Answer 1

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

Но почему бы не использовать чистый CSS для этого?

.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

Вы можете РБП сделать это вместо того, чтобы пуговица:

$(".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 }); 
});