jquery - 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'))
• 应用样式

Answer 2

你可以使用

$('p').closest('li').css('font-size','30px');

Answer 3

<p>在您的情况下，父级是<li>. 你需要：

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