jqueryホバーで片方の親だけを変更する方法

Question

<p>タグの上にカーソルを置くと、親を1つだけ変更したいと思います。

$('.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').closest('li').css('font-size','30px'); 

Answer 2

$('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()）

を適用し、その親を取得して下さい

ホバーイベントが呼び出されると、次のようになります。

• 内側の段落（.children('p')）
• はあなたのケースで<p>の

Answer 3

親が<li>あるスタイルを適用して下さい現在の要素（$(this)）

を取得します。あなたは必要があります：

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