Ändern Sie die Farbe eines Divs, wenn Sie den Mauszeiger über einen Link bewegen

Question

Also habe ich ein paar Artikel-Tags, jeder hat einen Link, der, wenn er aktiviert ist, den Hintergrund eines div mit einem Bild in diesem Artikel ändern muss. Ich möchte, dass der Link-Hover nur auf den Artikel angewendet wird, auf dem er sich befindet, und nicht auf die anderen Artikel. Der folgende Code scheint auch auf die divs anderer Artikel zu zielen. Kann mir bitte jemand in die richtige Richtung zeigen? Vielen Dank

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

So etwas sollte den Trick

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

Answer 2

Sie $('...').hover(function { $(this) } tun können das aktuelle hovered Element zu erhalten, z.B .:

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

Es ist sehr einfach, dass Sie CSS-Hover-Eigenschaft verwenden, können Hintergrundfarbe zu ändern.

Es würde funktionieren, Wenn dies nicht funktioniert, ist es möglich, dass eine andere Klasse die Hover-Hintergrundeigenschaft überschreibt. tun Dann !important

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

Dies würde sicher arbeiten.

Answer 4

Sie können das Bild über das Stammhaus des Verbindungselements finden

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

Sie das Bild auswählen können es div und Verwenden Sie "this", um Hintergrundfarbe zu bestimmten div hinzuzufügen .

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

Answer 7

ich tun würde, so etwas wie dieses beacause viel besser ist und recomended Ihr Styling in eine CSS-Datei statt Hardcoding-Stil über js zu halten.

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

Also, schaltet dies im Grunde die 'schwebte' Klasse auf dem Element, das Sie schweben, so können Sie einfach Stil, die Klasse in Ihrem CSS-Datei .hovered. Mit freundlichen Grüßen und fröhliche Codierung!