jQuery get element of class on .hover

Question

$('.product-list').hover(
  $('.product-list-thumbnail ').css({'opacity': "0.2;"})
);

On hover of an element i'm trying to change the opacity of another element. I tried using CSS, but this is the only solution I could find.

My HTML looks like:

<article class="wrapper">
  <div class="product-list-thumbnail "><img src="" /></div>
  <div class="product-list">Product details</div>
</article>

As I have a lot of these on the page. How can I target the class .product-list-thumbnail that's within the container my current class is in?

Thanks!

@epascarello it's the only way I could find to be able to toggle another element above the current one on hover — pourmesomecode
– pourmesomecode, Commented Dec 10, 2015 at 17:24
You could do this with CSS .wrapper:hover .product-list-thumbnail { opacity: 0.2; } but the element you're changing the opacity off must be a child of the one you're hovering over. — Martin
– Martin, Commented Dec 10, 2015 at 17:26
Hey, shouldn't the class name be "product-list-thumbnail" instead of ".product-list-thumbnail" ? — coderz
– coderz, Commented Dec 10, 2015 at 17:26

Lucas Souza · Accepted Answer · 2015-12-10 17:28:01Z

8

You're not properly using method hover. This method expects two functions, first is called on hover and second called on blur. Also you can use $.siblings to find .product-list-thumbnail.

$('.product-list').hover(
  function(){
   $(this).siblings('.product-list-thumbnail').css({'opacity': "0.2"}); 
  },
  function(){
   $(this).siblings('.product-list-thumbnail').css({'opacity': "1"}) ;
  }  
);

answered Dec 10, 2015 at 17:28

Lucas Souza

3711 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

zaylen · Accepted Answer · 2015-12-10 17:26:09Z

1

I guess it's a misstyping but in your html syntax there is a dot. ".product-list-thumbnail" Try this.

 <div class="product-list">Product details</div>

answered Dec 10, 2015 at 17:26

zaylen

113 bronze badges

Comments

Vixed · Accepted Answer · 2015-12-10 17:34:33Z

0

fix the line <div class=".product-list-thumbnail"> replace with <div class="product-list-thumbnail">

..And here we are ;)

$('.product-list').hover(function(){
  $(this).parent().find('.product-list-thumbnail').css({'opacity': '0.2'})
},function(){
  $(this).parent().find('.product-list-thumbnail').css({'opacity': '1'})
});

answered Dec 10, 2015 at 17:34

Vixed

3,4996 gold badges40 silver badges69 bronze badges

Comments

fbozo · Accepted Answer · 2015-12-10 17:58:53Z

0

First you could try and remove the period on the class to look like this <div class="product-list-thumbnail "> then I'd suggest a change the html code to wrap the thumbnail on the same element (better syntax) to something like

<div class="product-detail">
    <img src="" />
    Product detail information
</div>

So you can affect the element through css like this:

.product-detail:hover img {opacity: .2}

edited Dec 10, 2015 at 17:58

answered Dec 10, 2015 at 17:31

fbozo

9,3311 gold badge15 silver badges8 bronze badges

Collectives™ on Stack Overflow

jQuery get element of class on .hover

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related