更改CSS选择器的孩子悬停在jQuery

下面这个基本的jQuery代码，我将如何使mousout更改项目为display:none？更改CSS选择器的孩子悬停在jQuery

也可以这样改进？

任何帮助，请

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

在jQuery的文档的网站，我看到这一点：$(selector).hover(handlerIn, handlerOut)，但我不明白这里怎么应用它。

来源

2011-11-30 JasonDavis

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

但是，为什么不使用纯CSS呢？

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

来源

2011-11-30 00:27:34 ThiefMaster

I想使用CSS，但由于某种原因，我无法使其工作 – JasonDavis

为什么不用你的html + css创建另一个问题和jsfiddle？我相信有人能够帮助你。 – ThiefMaster

另外我不知道你冷酷地把悬停事件放在这样的选择器列表中，我以为你只能添加：悬停到最后一个项目，所以谢谢我学到了一些东西 – JasonDavis

你并不需要2个功能，如果你测试事件：

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

这里有一个演示：http://jsfiddle.net/U5QGU/

我还简化了选择，因为你并不需要：

.image p

因为你已经知道它的父母有.image

你可以a LSO做到这一点，而不是切换的：

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

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

来源

2011-11-30 00:27:05 shredder

ThiefMaster也是正确的，但是这正是因为你问它：

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

来源

2011-11-30 00:33:33

他显然想要隐藏/显示那么那些方法更合适。 – ThiefMaster

使用儿童的替代方法是提供选择方面：

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

来源

2011-11-30 00:40:08 mikepurvis

更改CSS选择器的孩子悬停在jQuery

回答

相关问题