CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user1038814
user1038814

Reputation: 9657

Change colour of a div when hovering over a link

So, I have a few article tags, each has a link, which when hovered upon needs to change the background of a div containing an image within that article. I want the link hover to only apply to the article it is in and not affect the other articles. The following code seems to target the divs of other articles as well. Please can someone point me in the right direction? Many thanks

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

Upvotes: 1

Views: 247

Answers (7)

Cata John
Cata John

Reputation: 1401

I would do something like this beacause is much better and recomended to hold your styling into a css file instead of hardcoding style via js.

    $('.box1').hover(
       function(){
          $(this).addClass('onOver');
       }, 
       function(){
    	  $(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>

So, this basically toggles the 'hovered' class on the element you are hovering, so you can simply style that .hovered class in your css file. Best regards and happy coding!

Upvotes: 0

Gaurav Gautam
Gaurav Gautam

Reputation: 1

you can select the image div it and use "this" for add background color to particular div. 

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

Upvotes: 0

Dorian
Dorian

Reputation: 23939

You can do $('...').hover(function { $(this) } to get the current hovered element, e.g.:

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


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

Upvotes: 0

praveena
praveena

Reputation: 222

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");
          });
        });

Upvotes: 0

Weedoze
Weedoze

Reputation: 13943

You can find the image via the parent of the link element 

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

Upvotes: 0

Mutafaf
Mutafaf

Reputation: 126

Its very simple you can use css hover property to change background color.

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

It'd work, If this doesn't work its possible some other class over-riding hover background property. Then do !important

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

This would surely work.

Upvotes: 0

mic4ael
mic4ael

Reputation: 8300

Something like this should do the trick

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

Upvotes: 2

Related Questions