Question

我正在使用jQuery执行一个关于mouseenter / mouseleave的操作，它似乎正在工作但不是当我退出div时。这仅在退出实际窗口时有效。

这是我的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>

我在这里做了一个小提琴。我正在学习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类关联的CSS。
在你的css中添加这两个属性：

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

Answer 2

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

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

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

PS：我只更改了叠加边框以显示叠加边界。

Answer 3

您的功能完美无缺！问题是叠加。你把它放在绝对的地方，使它覆盖整个身体。因此，稍微更改一下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 4

你可以使用纯css

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

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

Answer 5

Actualy，代码正在运行，问题是你在覆盖整个页面的“.pods”类上设置了偶数...所以偶数仅在鼠标离开页面时触发

Answer 6

学习jquery，所以建议表示赞赏。

jQuery不需要达到要求。尝试使用css伪类: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/

Answer 7

您应该致电的实际鼠标事件是 onmouseout

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

使用鼠标退出删除类

7 个答案: