当鼠标悬停在链接上时，改变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类。 最好的问候和快乐的编码！