4

短い要約用と長い要約用の 2 つの 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

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 }
于 2012-10-22T08:47:18.770 に答える
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();
        });

ライブデモを参照

于 2012-10-22T12:48:19.270 に答える
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 に答える