jquery如何在悬停时仅更改一个父级
jquery如何在悬停时仅更改一个父级
提问于 2012-09-13 20:19:41
当我将鼠标悬停在<p>标签上时，我只想更改一个父级。代码是：
$('.hover').each(function () {
$(this).parent().hover(function () {
$('p').parent(this).css('font-size','30px');
}, function () {
$('p').parent(this).css('font-size','10px');
});
});HTML是：
<ul>
<li>1 <p class='hover'>xxxx</p></li>
<li>2 <p class='hover'>yyyy</p></li>
</ul>当我将鼠标悬停在"xxxx“上时，我希望"1”和"xxxx“更改，但"2”和"yyyy“不做任何更改；当我将鼠标悬停在"yyyy”上时，我希望"2“和"yyyy”更改，但"1“和"xxxx”不做任何更改。
我是jQuery的新手。
回答 3
Stack Overflow用户
发布于 2012-09-13 20:24:52
$('p.hover').parent().hover(function() {
$(this).children('p').css('font-size','30px');
}, function () {
$(this).children('p').css('font-size','10px');
});您不必使用each循环来添加悬停。如果选择了多个元素，则会将事件应用于所有元素。
话虽如此，我还是稍微优化了你的代码。
我已经在段落的父级上添加了悬停，就像你做的那样。通过在事件的回调中使用$(this)，我实际上可以选择悬停的元素并对该元素应用样式。
因为我希望在段落中应用字体大小，所以我首先选择所需的子项。
以上总结如下：
在悬停事件(.hover())中查找其父级的段落元素，即
-
li元素
一旦调用了hover事件：
- Get current element (
.children('p')) - Apply
内部段落样式获取当前元素
Stack Overflow用户
发布于 2012-09-13 20:22:37
你可以使用
$('p').closest('li').css('font-size','30px');Stack Overflow用户
发布于 2012-09-13 20:25:37
在您的例子中，<p>的父类是<li>。您需要：
$('.hover').parent().parent().hover(
function () {
$(this).css('font-size','30px');
}, function () {
$(this).css('font-size','10px');
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/12406094
复制相关文章
相似问题
腾讯云开发者
