logo标签列表

鼠标移出时隐藏div

jquerymouseout
4
我有两个div，一个用于短摘要，另一个用于长摘要。
当我“mouseover”短摘要时，短摘要消失，长摘要出现。
当我从长摘要“mouseout”时，它应该消失，短摘要应该出现。
问题在于，当我仍然在长摘要的边界内但已经离开了短摘要所在的位置时，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>
5个回答
2

不需要使用JavaScript来处理，你可以通过CSS来完成这个功能。这样做既有利于性能，又有语义和逻辑上的优势。

不过，你需要稍微修改一下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 }
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>

JQuery：

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

请参考在线演示

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

尝试使用此工作演示: http://jsfiddle.net/UG3FZ/

此演示使用以下 API：

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

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

由于您正在使用JQ最新版本，如果我可以建议您阅读jQuery的API和一些网上的技巧。

剩下的演示应该满足您的需求 :)

代码

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

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

    });
});​
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接