使用JQuery选择最小的悬停元素

Question

我想问题在标题中：我想在用户点击时仅将样式应用于最小的悬停元素。我该如何选择这个元素？

感谢。

Answer 1

要在div上添加样式而不影响父级，可以使用event.stopPropagation()停止冒泡，如下所示：

$("div").click(function(e) {
  $(this).toggleClass("myClass");
  e.stopPropagation();
});

You can see a demo of this working here

对于hover案例，您实际上需要mouseover和mouseout而不是mouseenter和mouseleave（.hover()绑定到的）在这种情况下，像这样：

$("div").mouseover(function(e) {
  $(this).addClass("myClass").parents().removeClass("myClass");
  e.stopPropagation();
}).mouseout(function() {
  $(this).removeClass("myClass");
});​

You can see this in action here