jquery - 鼠标移开时隐藏 div

我有两个 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>

最佳答案

试试这个

<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>

关于jquery - 鼠标移开时隐藏 div，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/13007550/