Question

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

在悬停元素时，我试图改变另一个元素的不透明度。我尝试使用CSS，但这是我能找到的唯一解决方案。

我的HTML看起来像：

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

因为我在页面上有很多这些。如何定位当前班级所在容器中的班级.product-list-thumbnail？

谢谢！

Answer 1

您没有正确使用方法hover。这种方法需要两个函数，第一个是在悬停时调用，第二个是在模糊时调用。您也可以使用$.siblings查找.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"}) ;
  }  
);

Answer 2

我猜这是一个错误的分类，但在你的html语法中有一个点。 “产品列表缩略图” 试试这个。

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

Answer 3

首先，您可以尝试将类中的句点删除为<div class="product-list-thumbnail ">，然后我建议更改html代码以将缩略图包含在同一元素（更好的语法）上

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

所以你可以像这样通过css影响元素：

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

Answer 4

修正行＆lt; div class =＆＃34; .product-list-thumbnail＆＃34;＆gt; 替换为＆lt; div class =＆＃34; product-list -thumbnail＆＃34;＆GT;

..我们在这里;）

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

jQuery在.hover上获取类的元素

4 个答案: