4

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

5 回答 5

2

您可以使用 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 }
于 2012-10-22T08:47:18.770 回答
0

试试这个 

<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>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
于 2012-10-22T08:35:13.543 回答
0

这很简单，使用 jquery 本机函数mouseleave

于 2012-10-22T08:36:15.307 回答
0

试试这个工作演示：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");

    });
});​
于 2012-10-22T08:40:50.037 回答
0

这样做： -

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>

查询：

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

参考现场演示

于 2012-10-22T12:48:19.270 回答