Question

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

Answer 1

您可以使用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 }

希望这有帮助。

Answer 2

试试这个

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

Answer 3

使用jquery本机函数mouseleave

这很简单

Answer 4

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

    });
});

Answer 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

当mouseout时隐藏div

5 个答案:

HTML：

JQuery的：