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不熟悉。

- Choo Chu

---

谢谢你的帮助，但这并不是我想要的。 我重新编码并在这里发布了。 链接 非常感谢。 - Choo Chu

下次请使用您问题下方的“编辑”按钮。这样可以让您修改您的问题，而不必为每个修改创建一个新问题。现在我们有一个开放性问题，有多个合法答案，如果有人遇到相同的问题，这将非常令人失望。 - Tim S.

Answer 1

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

您不必使用each循环来添加悬停效果。如果您选择了多个元素，则会将事件应用于所有元素。

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

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

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

总结如下：

找到段落元素（$('p.hover')）

获取它的父元素，即li元素（.parent()）

应用hover事件（.hover()）

一旦调用了hover事件：

获取当前元素（$(this)）

查找内部段落（.children('p')）

应用样式

- Tim S.

Answer 2

你可以使用

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

- Michael Laffargue

Answer 3

在您的情况下，<p> 的父元素是 <li>。您需要：

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

- Ilia Frenkel