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');
});

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

说完了，我稍微优化了你的代码。

我已将鼠标悬停在段落的父级上，就像你一样。通过在事件的回调中使用$(this)，我实际上可以选择悬停元素并在该元素上应用样式。

因为我希望在段落上应用font-size，所以我先选择所需的孩子。

总结以上：

找到段落元素（$('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');
    });

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

3 个答案: