在jQuery中将鼠标悬停时更改CSS选择器子级

Question

With this basic jQuery code below, how would I make the on mousout change the item back to display:none ?

Also can this be improved?

Any help please

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

On the jQuery docs site I saw this: $(selector).hover(handlerIn, handlerOut) but I don't understand how to apply it here.

Answer 1

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

But why not use pure CSS for it?

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

Answer 2

You don't need 2 functions if you test the event:

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

Here's a demo: http://jsfiddle.net/U5QGU/

I also simplified the selector because you don't need:

.image p

Because you already know that its parent has .image

You could also do this instead of toggle:

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

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

Answer 3

ThiefMaster is correct also but this is exactly as you asked for it:

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

Answer 4

An alternative to using children is to provide selector context:

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

To use a single function as suggested by shredder:

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