1

ここで同様の質問をしました

jqueryホバー時に親を1つだけ変更する方法

しかし、それは私が望むものではありません。だから、私は再コード化してここにもう一度投稿します

タグの上<a>にカーソルを置いたときに、親を 1 つだけオンに変更したいと思います。<p>コードは次のとおりです。

$('.hover').each(function () {
 $(this).parent().hover(function () {
        $('p').parent(this).css('background-color','red');
    }, function () {
        $('p').parent(this).css('background-color','black');
 });
});

HTMLは次のとおりです。

<ul>
   <li><a href='#'>1</a> <p class='hover'>A</p></li>
   <li><a href='#'>2</a> <p class='hover'>B</p></li>
   <li><a href='#'>3</a> <p class='hover'>B</p></li>
   <li><a href='#'>4</a> <p class='hover'>X</p></li>
   <li><a href='#'>5</a> <p class='hover'>Y</p></li>
   <li><a href='#'>6</a> <p class='hover'>Z</p></li>
</ul>

私が欲しいのは、「A」と「1」をホバーすると変更され、その他は変更されず、「b」と「2」にホバーすると変更され、その他も変更されないことです

申し訳ありませんが、私はjqueryが初めてです。

4

2 に答える 2

0

.each使用する必要はありません.prev

$('.hover').hover(function () {
        $(this).prev('a').css('background-color','red');
    }, function () {
        $(this).prev('a').css('background-color','yellow');
 });

代替 :.parent().children('a') ORを使用できます。siblings('a')それ以外の.prev('a')

な Demo

アップデート

.each（コメントで述べたように）使用したい場合は、以下を実行してください。

$('.hover').each(function () {
 $(this).parent().hover(function () {
        $(this).children('a').css('background-color','red');
    }, function () {
        $(this).children('a').css('background-color','yellow');
 });
});

Demo using .each

于 2012-09-14T04:38:10.467 に答える
0

mostは兄弟ではなくdom ツリーを上に移動するため、ここでの使用closest('a')は機能しません。を使用してナビゲートすると、関連する「a」が見つかります.parent('li').find('a')

また、私が知る限り、ホバーハンドラーが必要なだけ<p>なので、必要はありませんeach。

$('.hover').hover(function () {
        $(this).parent('li').find('a').css('background-color','red');
    }, function () {
        $(this).parent('li').find('a').css('background-color','black');
 });

ここでフィドル: http://jsfiddle.net/U4n2T/16/

于 2012-09-14T05:27:18.997 に答える