使用jQuery如何通过将鼠标移到或移出一个div框来轻松地显示和隐藏该框？

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以再次显示它。

拥有完全看不见的东西，期望用户将鼠标移到不存在的东西上，这可能被认为是糟糕的设计。