CODEWITHSUNDEEP
javascriptjqueryhtmlcss
pourmesomecode
pourmesomecode

Reputation: 4318

jQuery get element of class on .hover

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

Upvotes: 0

Views: 502

Answers (4)

fbozo
fbozo

Reputation: 9181

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}

Upvotes: 0

Vixed
Vixed

Reputation: 3509

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

Upvotes: 0

Lucas Souza
Lucas Souza

Reputation: 371

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

Upvotes: 8

zaylen
zaylen

Reputation: 11

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>

Upvotes: 1

Related Questions