鼠标移出时隐藏div答案

【问题标题】：hide div when mouseout鼠标移出时隐藏div
【发布时间】：2012-10-12 00:48:33
【问题描述】：

我有两个 div，一个用于简短摘要，一个用于长摘要。
当我在简短摘要上“鼠标悬停”时，简短摘要消失，而长摘要出现。
当我从长摘要中“鼠标移出”时，它应该消失并且短摘要应该出现。

问题是当我仍在长摘要的边界内但不在排序摘要的位置时，会发生 mouseout 事件

代码：

<head>
  <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.js"></script>
  <script>
      function show(Fdiv) {
          $(Fdiv).css("display", "none");
          $(Fdiv).next().css("display", "inline");
      }
      function hide(Sdiv) {
          $(Sdiv).css("display", "none");
          $(Sdiv).prev().css("display", "inline");
      }
  </script>

</head>
<body>
<div onmouseover="show(this)"> Sort summary <br /> Second Row</div>
<div onmouseout="hide(this)" style="display:none"> Long Summary <br /> Second Row<br /> Third Row <br /> Fourth Row</div>
</body>
</html>

【问题讨论】：

标签： jquery mouseout

【解决方案1】：

试试这个

<div onmouseover="show_div(this)"> Sort summary <br /> Second Row</div>
<div onmouseout="hide_div(this)" style="display:none"> Long Summary <br /> 
   Second Row<br /> Third Row <br /> Fourth Row</div>
<script>
    function show_div(Fdiv) {
      $(Fdiv).hide();
      $(Fdiv).next().show();
    }
    function hide_div(Sdiv) {
      $(Sdiv).hide();
      $(Sdiv).prev().show();
   }
 </script>

【讨论】：

【解决方案2】：

这很简单，用 jquery 原生函数mouseleave

【讨论】：

【解决方案3】：

试试这个工作演示：http://jsfiddle.net/UG3FZ/

此演示使用以下 API：

.mouseout-http://api.jquery.com/mouseover/

.mouseover - http://api.jquery.com/mouseout/

由于您使用的是最新的 JQ，如果我建议您阅读 api jquery 和一些在线提示。

其余的演示应该可以满足您的需求:)

代码

$(function() {
    $(".show_div").mouseover(function() {
        $(this).next().show();
        $(this).hide("slow");
    });

    $(".hide_div").mouseout(function() {
        $(this).prev().show();
        $(this).hide("slow");

    });
});

【讨论】：

【解决方案4】：

您可以使用 CSS 来完成此操作，而不是使用 JavaScript 来破解它。这具有性能以及语义和逻辑优势。

你必须稍微改变你的 HTML 结构。我假设这些摘要是针对书籍的。

HTML

<div class="book">
    <p class="short">Short summary.</p>
    <p class="long">Long summary.</p>
</div>

CSS

.book .long,
.book:hover .short { display:none }
.book:hover .long { display:block }

【讨论】：

【解决方案5】：

这样做：-

HTML：

<div class="main">
    <div class="short"> Short summary <br /> Second Row</div> 
    <div class="long" style="display:none"> Long Summary <br /> Second Row<br /> Third Row <br /> Fourth Row</div>
</div>

jQuery:

$(".main")
    .mouseenter(
        function() {
            $(this+".long").show();
            $(this+".short").hide();
        })
    .mouseleave(
        function() {
            $(this+".short").show();
            $(this+".long").hide();
        });

参考LIVE DEMO

【讨论】：