リンク上でホバリングしたときにdivの色を変更する

私はいくつかの記事タグを持っています。それぞれにリンクがあり、その記事内の画像を含むdivの背景を変更する必要があります。私は、リンクホバーをその記事にのみ適用し、他の記事には影響を与えないようにします。次のコードは他の記事のdivを対象にしているようです。誰かが正しい方向に私を向けることができますか？このような多くのおかげリンク上でホバリングしたときにdivの色を変更する

$(".edgtf-pli-link").on("hover", function() { 
 
    $(".edgtf-pli-image").css("background", "red"); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<article class="edgtf-pl-item post-36"> 
 
    <div class="edgtf-pl-item-inner"> 
 
    <div class="edgtf-pli-image"> 
 
     <img width="80" height="106" src="garden-featured.jpg" /> 
 
    </div> 
 
    <div class="edgtf-pli-text-holder"> 
 
     <div class="edgtf-pli-text-wrapper"> 
 
     <div class="edgtf-pli-text"> 
 
      <h4 itemprop="name" class="edgtf-pli-title entry-title">Garden</h4> 
 
      <p itemprop="description" class="edgtf-pli-excerpt"></p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <a itemprop="url" class="edgtf-pli-link" href="http://localhost:8888/" target="_self"></a> 
 
    </div> 
 
</article> 
 

 
<article class="edgtf-pl-item post-37"> 
 
    <div class="edgtf-pl-item-inner"> 
 
    <div class="edgtf-pli-image"> 
 
     <img width="80" height="106" src="wall-featured.jpg" /> 
 
    </div> 
 
    <div class="edgtf-pli-text-holder"> 
 
     <div class="edgtf-pli-text-wrapper"> 
 
     <div class="edgtf-pli-text"> 
 
      <h4 itemprop="name" class="edgtf-pli-title entry-title">Wall</h4> 
 
      <p itemprop="description" class="edgtf-pli-excerpt"></p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <a itemprop="url" class="edgtf-pli-link" href="http://localhost:8888" target="_self"></a> 
 
    </div> 
 
</article>

出典

2017-03-03 user1038814

'$（this）.find（ '。edgtf-pli-image'）を試してみてください。css（ "background"、 "red"）; '代わりに – Toxide82

水平スクロールバーを削除してもよろしいですか？読みやすさが向上します。 – reporter

何かがあなたが現在ホバーの要素を取得するために$('...').hover(function { $(this) }を行うことができます

$(".edgtf-pli-link").on("hover", function() { 
    $(this).closest('.edgtf-pl-item-inner').find('.edgtf-pli-image').css('background', 'red'); 
});

出典

2017-03-03 10:37:49 mic4ael

トリック、例えば：

$('.edgtf-pli-link').hover(function() { 
    $(this).closest('.edgtf-pl-item').find('.edgtf-pli-image').css('background', 'red') 
}, function() { 
    $(this).closest('.edgtf-pl-item').find('.edgtf-pli-image').css('background', 'none') 
})

https://api.jquery.com/hover/
https://api.jquery.com/closest/

$('.edgtf-pli-link').hover(function() { 
 
    $(this).closest('.edgtf-pl-item').find('.edgtf-pli-image').css('background', 'red') 
 
}, function() { 
 
    $(this).closest('.edgtf-pl-item').find('.edgtf-pli-image').css('background', 'none') 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<article class="edgtf-pl-item post-36"> 
 
    <div class="edgtf-pl-item-inner"> 
 
    <div class="edgtf-pli-image"> 
 
     <img width="80" height="106" src="garden-featured.jpg" /> 
 
    </div> 
 
    <div class="edgtf-pli-text-holder"> 
 
     <div class="edgtf-pli-text-wrapper"> 
 
     <div class="edgtf-pli-text"> 
 
      <h4 itemprop="name" class="edgtf-pli-title entry-title">Garden</h4> 
 
      <p itemprop="description" class="edgtf-pli-excerpt"></p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <a itemprop="url" class="edgtf-pli-link" href="http://localhost:8888/" target="_self">link 1</a> 
 
    </div> 
 
</article> 
 

 
<article class="edgtf-pl-item post-37"> 
 
    <div class="edgtf-pl-item-inner"> 
 
    <div class="edgtf-pli-image"> 
 
     <img width="80" height="106" src="wall-featured.jpg" /> 
 
    </div> 
 
    <div class="edgtf-pli-text-holder"> 
 
     <div class="edgtf-pli-text-wrapper"> 
 
     <div class="edgtf-pli-text"> 
 
      <h4 itemprop="name" class="edgtf-pli-title entry-title">Wall</h4> 
 
      <p itemprop="description" class="edgtf-pli-excerpt"></p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <a itemprop="url" class="edgtf-pli-link" href="http://localhost:8888" target="_self">link 2</a> 
 
    </div> 
 
</article>

出典

2017-03-03 10:41:08 Dorian

あなたは背景色を変更するCSSホバープロパティを使用することができ、その非常にシンプル。

.edgtf-pli-link:hover { 
background: green; 
}

これが機能しない場合は、他のクラスのオーバーライディングホバーバックグラウンドプロパティが可能です。は、これは確かに働くだろう!important

.edgtf-pli-link:hover { 
    background: green !important; 
}

を行います。

出典

2017-03-03 10:42:07

あなたは画像がそれをDIV選択することができ

$(".edgtf-pli-link").hover(function() { 
 
    $(this).parent().find(".edgtf-pli-image").css("background", "red"); 
 
    }, 
 
    function(e) { 
 
    $(this).parent().find(".edgtf-pli-image").css("background", ""); 
 
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<article class="edgtf-pl-item post-36"> 
 
    <div class="edgtf-pl-item-inner"> 
 
    <div class="edgtf-pli-image"> 
 
     <img width="800" height="1060" src="garden-featured.jpg" /> 
 
    </div> 
 
    <div class="edgtf-pli-text-holder"> 
 
     <div class="edgtf-pli-text-wrapper"> 
 
     <div class="edgtf-pli-text"> 
 
      <h4 itemprop="name" class="edgtf-pli-title entry-title">Garden</h4> 
 
      <p itemprop="description" class="edgtf-pli-excerpt"></p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <a itemprop="url" class="edgtf-pli-link" href="http://localhost:8888/" target="_self">aa</a> 
 
    </div> 
 
</article> 
 
<article class="edgtf-pl-item post-37"> 
 
    <div class="edgtf-pl-item-inner"> 
 
    <div class="edgtf-pli-image"> 
 
     <img width="800" height="1060" src="wall-featured.jpg" /> 
 
    </div> 
 
    <div class="edgtf-pli-text-holder"> 
 
     <div class="edgtf-pli-text-wrapper"> 
 
     <div class="edgtf-pli-text"> 
 
      <h4 itemprop="name" class="edgtf-pli-title entry-title">Wall</h4> 
 
      <p itemprop="description" class="edgtf-pli-excerpt"></p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <a itemprop="url" class="edgtf-pli-link" href="http://localhost:8888" target="_self">aa</a> 
 
    </div> 
 
</article>

出典

2017-03-03 10:43:27 Weedoze

CSS

.changeColor{ 
background-color:red; 
}

jQuery(function() { 
      jQuery(".edgtf-pli-link").hover(function() { 
      jQuery('.edgtf-pli-image', this).addClass("changeColor"); 
      }, function() { 
      jQuery('.edgtf-pli-image', this).removeClass("changeColor"); 
      }); 
     });

出典

2017-03-03 10:44:05 praveena

link要素の親を介して画像を見つけることができますし、特定のdivに背景色を追加するには "this"を使用します。

$(".edgtf-pli-image").on("hover", function() { 
     $(this).css("background", "red"); 
    })

出典

2017-03-03 11:16:47

このbeacauseがはるかに優れているとJSを経由して代わりにハードコーディングスタイルのCSSファイルにあなたのスタイルを保持するためにお奨めのように私が何かをするでしょう。

$('.box1').hover(
 
     function(){ 
 
      $(this).addClass('onOver'); 
 
     }, 
 
     function(){ 
 
    \t $(this).removeClass('onOver'); 
 
    });

.onOver{ 
 
    background-color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span class="box1">Box1</span>

だから、これは基本的にあなたがホバリングしている要素の「推移」クラスを切り替えますので、あなたのCSSファイルでクラスを.hovered単にスタイルをすることができます。よろしくお願いいたします。

出典

2017-03-03 20:16:42

リンク上でホバリングしたときにdivの色を変更する

答えて

関連する問題