Question

我想只在触发它的元素上运行一个javascript。我试图进行研究，但找不到答案的方法。我知道这可能很简单，但我是java的新手。

这是我的问题FIDDLE的小提琴。

我想要的是，当我将鼠标悬停在上部元素上时，只显示其相应的评分，而不是两者。我尝试过find（）但没有成功

$('.product-image').hover(
  function() {
    $('.product-image').find('.ratings').css('opacity', '1');
  },
  function() {
    $('.ratings').css('opacity', '0');
  });

谢谢

Answer 1

您的问题是您没有选择元素。您需要更改代码以使用$（this）或$（evt.target）来获取元素

我该怎么办？只用CSS

＆＃13;

.product-image + .ratings {
  transition: opacity 0.5s ease; 
  opacity: 0;
}

.product-image:hover + .ratings {
  opacity: 1;
}

.product-image {
  height: 50px;
  width: 50px;
  background: red;
  margin-bottom: 10px;
}

.ratings {
  height: 50px;
  width: 50px;
  background: blue;
  margin-bottom: 10px;
}

＆＃13;

<div class="product">
  <div class="product-image"></div>
  <div class="ratings"></div>
</div>

<div class="product">
  <div class="product-image"></div>
  <div class="ratings"></div>
</div>

＆＃13;

Answer 2

您可以在方法正文中使用event.target，这将提供触发hover事件的元素。将其包装在$()中以使jQuery上下文可用。

$('.product-image').hover(function(event){  
  $(event.target).next('.ratings').css('opacity', '1');
}, function(event){
  $(event.target).next('.ratings').css('opacity', '0');
});

还更新了你的jsFiddle：http://jsfiddle.net/Z33kk/21/

仅在触发它的元素的子元素上运行javascript

2 个答案: