jquery如何在悬停时仅更改一个父级

Question

当我将鼠标悬停在 <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 新手。

Answer 1

$('p.hover').parent().hover(function() {
    $(this).children('p').css('font-size','30px');
}, function () {
    $(this).children('p').css('font-size','10px');
});

您不必使用each 循环来添加悬停。如果您选择了多个元素，它将在所有元素上应用该事件。

话虽如此，我稍微优化了您的代码。

我已经在段落的父级上添加了悬停，就像您所做的那样。通过在事件回调中使用 $(this) 我实际上可以选择悬停的元素并在该元素上应用样式。

因为我希望字体大小应用于段落，所以我首先选择所需的子项。

<小时/>

以上总结:

• 查找段落元素 ($('p.hover'))
• 获取其父元素，即 li 元素 (.parent())
• 应用悬停事件 (.hover())

调用悬停事件后:

• 获取当前元素($(this))
• 查找内部段落 (.children('p'))
• 应用样式