将鼠标悬停在链接上时更改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 hover属性来改变背景颜色。

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

它的工作原理，如果这不起作用，可能会有其他类的重载悬停背景属性。 然后执行!important

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

这肯定有用。

Answer 4

您可以通过link元素的父级找到图像

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

我会做这样的事情，因为它更好，并建议将你的样式保存到css文件中，而不是通过js硬编码样式。

＆＃13;

＆＃13;

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

＆＃13;

.onOver{
  background-color: red;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

所以，这基本上可以解决“徘徊”的问题。你正在悬停的元素上的类，所以你可以简单地在你的css文件中设置.hovered类的样式。 最好的问候和快乐的编码！