скрыть 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>