0

trにカーソルを合わせるとブロックが表示されますが、マウスを移動してタグを付けるとブロックが非表示になります。リンクまたはテキストにカーソルを合わせると、ブロックが表示されたままになりますか？

CSS

.block{ display:none;width:50px; height:50px; background-color:#CCC;}
td{ border:1px solid #999;}

HTML

<table width="300" border="0" cellspacing="0" cellpadding="15">
  <tr>
    <td><a href="#">Test1</a><div class="block">1</div></td>
  </tr>
  <tr>
    <td><a href="#">Test2</a><div class="block">2</div></td>
  </tr>
  <tr>
    <td><a href="#">Test3</a><div class="block">3</div></td>
  </tr>
  <tr>
    <td><a href="#">Test4</a><div class="block">4</div></td>
  </tr>
  <tr>
    <td><a href="#">Test5</a> && <strong>BoldText</strong><div class="block">5</div>
    </td>
  </tr>
</table>

JS

$(document).ready(function () {

        $("tr").hover(function(){
             $(this).find(".block").show();
        });

        $("tr").mouseout(function(){
             $(this).find(".block").hide();
        });

});
4

2 に答える 2

2

hoveroutハンドラーではなく、ハンドラーのin部分とout部分の両方を使用する必要がありますmouseout。その理由はmouseout、イベントターゲットが内部要素に変更された場合にトリガーされますが、それは望ましくないためです。

    $("tr").hover(function(){
         $(this).find(".block").show();
    }, function(){
         $(this).find(".block").hide();
    });

デモを見る

于 2012-06-26T03:14:29.547 に答える
0

追加するだけです：

$("a").hover(function(){
             $(this).parent().find(".block").show();
});

あなたのドキュメントの準備ができました

于 2012-06-26T03:19:15.070 に答える