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

当我将鼠标hover在

标签上时，我只想更改一个父级。 代码是：

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

而HTML是：

  
 
1 
xxxx
 
2 
yyyy
  

当我将鼠标hover在“xxxx”上时，我希望“1”和“xxxx”改变，但“2”和“yyyy”什么都不做，当我将鼠标hover在“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'); }); 

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

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

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

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

---

总结如上：

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

一旦调用hover事件：

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

Answer 2

你可以用

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

Answer 3

在您的情况下，

父级是

。 你需要：

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