CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3927582
user3927582

Reputation: 189

jQuery: for each class when hovered over toggleClass on other div

$('.quick-links').each(function() {
    $(this).hover(function() {
        $('.img-thumbnail').toggleClass('quick-links-hover');
    });
});

So, this works however there is multiple of the .img-thumbnails on the page and I only want it to affect the corresponding one. HTML:

<a href="http://localhost:8888/home/the-last-rays-of-sunlight/" class="thumbnail img-thumbnail" data-slb-group="203_auto_1" data-slb-active="1" data-slb-internal="40">
  <img width="296" height="300" src="http://localhost:8888/wp-content/uploads/2014/01/The-Last-Rays-of-Sunlight-296x300.jpg" class="attachment-medium" alt="sold" />
</a>
<div class="pic-options">
  <div class="quick-links pull-left">
    <span class="icon-star-empty" data-toggle="tooltip" data-placement="top" title="Favourite this painting"></span>
    <span class="icon-slideshare"></span>
  </div>
  <div class="pull-right">
    <span class="quick-enquire">
      <a href="#">Enquire about this painting</a></span>
    <span id="isSold">sold</span>
  </div>
</div>

Thanks for your help!

Upvotes: 2

Views: 66

Answers (1)

adeneo
adeneo

Reputation: 318222

You're probably looking for something like this

$('.quick-links').hover(function() {
    $(this).closest('.pic-options').prev('.img-thumbnail').toggleClass('quick-links-hover');
});

Targets the parent .pic-options, then the previous .thumbnail

Upvotes: 3

Related Questions