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

Question

我只想运行一个 java 脚本只在触发它的元素的子元素上。我曾尝试进行研究，但找不到获得答案的方法。我知道这可能很简单，但我是 java.

的新手

这是我的问题 FIDDLE 的 fiddle。

我想要的是当我悬停在上面的元素上时，只显示其对应的评级，而不是两者都显示。我试过 find() 但没有成功

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

谢谢

Answer 1

您可以在方法主体中使用 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/

Answer 2

你的问题是你没有 select 元素。您需要更改代码以使用 $(this) 或 $(evt.target) 来获取元素

我该怎么做？只有 CSS

.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;
}

<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>

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

Run a javascript only on the child of the element that triggered it

javascript

jquery

children