5

<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が初めてです。

4

3 に答える 3

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

ホバーを追加するために each ループを使用する必要はありません。複数の要素を選択した場合、すべての要素にイベントが適用されます。

そうは言っても、コードをわずかに最適化しました。

あなたと同じように、段落の親にホバーを追加しました。イベントのコールバックで使用$(this)することで、ホバーされた要素を実際に選択し、その要素にスタイルを適用できます。

font-size を段落に適用したいので、最初に目的の子を選択します。

上記の要約：

  • 段落要素を見つける ( $('p.hover'))
  • 親であるli要素を取得します ( .parent())
  • ホバーイベントを適用 ( .hover())

ホバー イベントが呼び出されたら:

  • 現在の要素を取得 ( $(this))
  • 内側の段落 ( .children('p'))を見つける
  • スタイルを適用する
于 2012-09-13T12:24:52.310 に答える
0

あなたが使用することができます

$('p').closest('li').css('font-size','30px');
于 2012-09-13T12:22:36.790 に答える
0

<p>あなたの場合の親は です<li>。必要なもの:

$('.hover').parent().parent().hover(
    function () {
        $(this).css('font-size','30px');
    }, function () {
        $(this).css('font-size','10px');
    });
于 2012-09-13T12:25:37.090 に答える