使用鼠标退出删除 Class

Question

我正在使用 jQuery 在 mouseenter / mouseleave 上执行操作，它似乎可以正常工作，但当我退出 div 时却没有。这仅在我退出实际 window 时有效。

这是我的jQuery

$(document).ready(function() {
  $(".pods .col").on("mouseenter", function() {
    $(this).find(".pod-overlay").addClass("show")
  });
  $(".pods .col").on("mouseleave", function() {
    $(this).find(".pod-overlay").removeClass("show")
  });
});

这是我的HTML

<div id="splash" class="section section-splash bg">
  <div class="pods">
    <div class="col col-4">
      <div id="pod-splash-food" class="pod pod-food">
        <div class="pod-overlay"></div>
      </div>
    </div>
  </div>
</div>

我在这里做了一个js fiddle。我正在学习 jquery，非常感谢您的建议。

http://jsfiddle.net/34h48148/

Answer 1

您也可以像这样使用 hover 事件：

$(document).ready(function() {
  $(".pods .col").hover(function() {
    $(this).find(".pod-overlay").addClass("show")
  }, function() {
    $(this).find(".pod-overlay").removeClass("show")
  });
});

这是 hover event doc

但是，问题不在于函数，而在于与 pod-overlay class 关联的 CSS。
在您的 css 中添加这两个属性：

.pod-overlay {
    width:260px;
    height:260px;
    ...
}

Answer 2

你可以使用纯 css

.pods .col:hover .pod-overlay{
    visibility: visible;
}

.pods .col .pod-overlay{
    visibility: hidden;
}

Answer 3

您应该调用的实际鼠标事件是 onmouseout

$(".pods .col").on("mouseout", function() {
  $(this).find(".pod-overlay").removeClass("show")
});

Answer 4

您的方法很好，但您在 mouseleave 上不起作用是因为叠加层位于 .col 之上，因此永远不会触发 mouseleave。除了其他答案所建议的之外，您还可以使用 pointer-events 。像这样

.pod-overlay {
    pointer-events: none;
    ....
}

这是更新后的演示 http://jsfiddle.net/dhirajbodicherla/34h48148/9/

PS: 我改了overlay的border只是为了显示overlay的边界

Answer 5

您的功能完美无缺！问题是覆盖。你放置那个绝对值，让它覆盖整个 body。所以，稍微改变一下你的 CSS，把 .pods 和 .col 放在相对位置。

.pods,.col { overflow: auto; position: relative; }

Updated Fiddle

我唯一要更改的功能是将两个事件绑定到同一个调用方：

$(document).ready(function() {
    $(".pods .col").on("mouseenter", function() {
        $(this).find(".pod-overlay").addClass("show")
    }).on("mouseleave", function() {
        $(this).find(".pod-overlay").removeClass("show")
    });
});

Answer 6

实际上，代码可以正常工作，问题是您在覆盖整个页面的“.pods”class 上设置了偶数...所以偶数仅在以下情况下触发你把鼠标移出页面

Answer 7

learning jquery, so advice is appreciated.

jQuery 不需要达到要求。尝试利用 css 伪 class :hover

.pod {
    width: 250px;
    height: 250px;
    background-color: blue;
    float: left;
}
.pod-overlay {
    display: none;
    z-index: 2;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: #fff;
    background-color: rgba(255, 255, 255, .9)
}

.pods .col:hover .pod-overlay  {
    display:block;
}

<div id="splash" class="section section-splash bg">
    <div class="pods">
        <div class="col col-4">
            <div id="pod-splash-food" class="pod pod-food">
                <div class="pod-overlay"></div>
            </div>
        </div>
    </div>
</div>

jsfiddle http://jsfiddle.net/34h48148/11/

使用鼠标退出删除 Class

Removing Class with Mouse Exit

jquery

mouseleave