當鼠標懸停在鏈接上時，改變div的顏色

Question

因此，我有幾個文章標籤，每個鏈接都有一個鏈接，當它需要更改包含該文章內圖像的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>

Answer 1

像這樣的東西應該做的伎倆

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

Answer 2

你可以做$('...').hover(function { $(this) }來獲得當前懸停的元素，例如：

$('.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>

Answer 3

它非常簡單，你可以使用CSS懸停屬性來更改背景顏色。

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

它會工作，如果這不起作用，它可能有其他類的懸停的背景屬性。 然後做!important

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

這肯定會工作。

Answer 4

您可以通過鏈接元素的父找到圖像

$(".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>

Answer 5

CSS

.changeColor{ 
background-color:red; 
} 

JS

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

Answer 6

您可以選擇圖像的div並使用「this」爲特定div添加背景色。

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

Answer 7

我會做這樣的事情是東陽要好得多，recomended握住你的造型成通過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類。 最好的問候和快樂的編碼！