Question

以下是代码：

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

<script>
$(function() {

$("#box").mouseleave(function() {
    $(this).hide();
  });


$("#box").mouseenter(function() {
    $(this).show();
});

});

</script>

当我将鼠标移开时，它会关闭，当我将鼠标移到“隐藏”“div”上时，它不再出现。为什么？什么是简单的修复？

Answer 1

正如其他人所说，您需要切换visibility而不是display属性。

你可以用JavaScript做到这一点，但纯CSS更好。但是，你不能:hover覆盖一个不可见的元素，所以你需要在它周围包装一个容器。

<div id="container"><div id="box"></div></div>

CSS：

#box {
    background-color: blue;
    visibility:hidden;
}
#container:hover #box {
    visibility: visible;
}

http://jsfiddle.net/mblase75/cF4tL/

Answer 2

“隐藏”div被CSS显示“隐藏”：无，你隐藏后将无法触发鼠标输入。

大多数人会缩小div而不是完全隐藏，或者用其他用户可识别的标记替换div以再次显示它。

有一些完全不可见的东西，期望用户将鼠标悬停在那些不存在的东西上。

使用jQuery如何通过在框中移动鼠标来轻松显示和隐藏div框？

2 个答案: