jQuery get 元素在 .hover 上类

jQuery get element of class on .hover

本文关键字：hover 上类 元素 get jQuery      更新时间：2023-09-26
$('.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？

谢谢！

您没有正确使用方法 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"}) ;
  }  
);
我想这是一个

错误的输入，但在你的 html 语法中有一个点。".产品列表缩略图"试试这个。

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

修正行

替换为

..我们在这里;)

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

首先，您可以尝试删除类上的句点，使其看起来像这样<div class="product-list-thumbnail ">然后我建议更改html代码以将缩略图包装在同一元素上(更好的语法(以类似于

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

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

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

相关文章：