Question

我想将悬停功能附加到div的孩子身上，但前提是这个div没有特定的课程。为了说明我的意图 - 我希望在鼠标进入任何＆＃34; .hover-button＆＃34;时触发悬停功能。 element，UNLESS container＆＃34; .column＆＃34;有班级＆＃34; .disabled＆＃34;添加到它：

＆＃13;

 $('.hover-button').hover( function() { 
   //showing tooltip
 } );

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="column">
  <div class="hover-button"></div>
  <div class="hover-button"></div>
  <div class="hover-button"></div>
</div>

<div class="column disabled">
  <div class="hover-button"></div>
  <div class="hover-button"></div>
  <div class="hover-button"></div>
</div>

＆＃13;

Answer 1

您可以使用jQuery的:not选择器。看一下这段代码，特别是这段代码

.column:not(.disabled) > .hover-button

＆＃13;

$('.column:not(.disabled) > .hover-button').on("mouseover", function() { 
    $(this).css({"background": "gold"}); 
 }).on("mouseout", function() {
    $(this).css({"background": "white"});
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="column">
  <div class="hover-button">Hover Here</div>
  <div class="hover-button">And Here</div>
  <div class="hover-button">And Here</div>
</div>

<div class="column disabled">
  <div class="hover-button">But not here</div>
  <div class="hover-button">Or here</div>
  <div class="hover-button">Or here</div>
</div>

＆＃13;

Answer 2

使用Not Method

 $('.column:not(.disabled)')

Answer 3

您可以在选择器中使用:not()来排除与其他选择器匹配的元素。

但是如果该类将动态更改，则需要使用委托绑定，而不是正常的事件绑定。

$(document).on({
    mouseenter: function () {
        // show tooltip
    },

    mouseleave: function () {
        // remove tooltip
    }
}, '.column:not(.disabled)');

我必须使用mouseenter和mouseleave，因为hover不是真实事件，所以在委派时你无法绑定它。

Answer 4

您可以查看父div是否已禁用＆＃39;像这样的课：

if ($(this).parent().hasClass('disabled')) {
    return false;
}

只有当容器没有某个类时，jQuery才会选择子项

4 个答案: