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

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

话虽如此,我稍微优化了你的代码.

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

因为我希望在段落上应用font-size,所以我先选择所需的子项.

总结如上:

• 找到段落元素($('p.hover'))
• 得到它的父li元素,元素(.parent())
• 应用悬停事件(.hover())

一旦调用悬停事件:

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

Answer 2

你可以使用

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