0

子要素を含む div コンテナーを表示しようとしています。マウスがその上に移動するまでコンテナーの上部を表示し、コンテンツを含む子要素を含むコンテナー全体を表示します。このような動作は私が望んでいるように機能しますが、問題は、マウスを子要素のいずれかに移動すると、メイン コンテナー全体がスライドして元に戻り、次に再び下にスライドすることです。コンテナ全体がMouseOverで下にスライドし、MouseOutがスライドして戻るまで下に留まるようにしようとしています。

<div onmouseover="$('#id_content').slideDown('fast', function(){ $(this).css('display', 'block'); $(this).css('visibility', 'visible'); });" 
 onmouseout="$('#id_content').slideUp('fast', function(){ $(this).css('display', 'none'); $(this).css('visibility', 'hidden'); });">
Title
<BR> 
mm/dd/yyyy hh:mm - hh:mm
<div id="id_content" style="visibility: hidden; display: none;">
    Description 
    <BR>
    Content 
</div>
<span class="commands"> <!-- Goes in the top right hand corner of the main container -->
    <span class="delete" onclick="delete_entry('record_id')">X</span>
</span>
</div>
4

3 に答える 3

1

とにかくJQueryを使用しているように見えるので、onmouseoverイベントを使用しないでください。

代わりに JQuery ホバー メソッドを使用してください: http://api.jquery.com/hover/

マウスがオブジェクトに入ったとき、およびマウスがオブジェクトから離れたときの関数を提供できます。

あなたがそれをしている間、私は onclick イベントを JQuerys .click() メソッドに置き換えます。http://api.jquery.com/click/

于 2013-04-16T15:42:06.933 に答える
1

jQuery にはそのための関数があります:ホバー。

また、イベント ハンドラーのインライン化を回避することもできます。

  <script>
    $('#a').hover(function(){
      $('#id_content').slideDown('fast', function(){ $(this).css('display', 'block'); $(this).css('visibility', 'visible'); });
    }, function(){
      $('#id_content').slideUp('fast', function(){ $(this).css('display', 'none'); $(this).css('visibility', 'hidden'); });
    });
  </script>

デモンストレーション

于 2013-04-16T15:43:23.390 に答える