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

【问题标题】：jquery how to change only one parent on hoverjquery如何在悬停时仅更改一个父级
【发布时间】：2012-09-13 12:19:40
【问题描述】：

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

【问题讨论】：

感谢您帮助我，但这并不是我真正想要的。我确实重新编码并在这里再次发布。 link非常感谢
下一次，使用问题下方的“编辑”按钮。这允许您修改您的问题。您不必为每次编辑创建一个新问题。现在我们有一个开放的问题，有多个合法答案，如果有人碰巧在这里遇到同样的问题，这将是非常令人失望的。

标签： jquery hover parent

【解决方案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'))
应用样式

【讨论】：

【解决方案2】：

你可以使用

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

【讨论】：

【解决方案3】：

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

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

【讨论】：