13

次の画像のように、エクストラトレントサイトでマウスオーバーイベントに遭遇しました。

代替テキストhttp://img3.imageshack.us/img3/4516/usercommment999.jpg

ユーザー名リンクの上にマウスを置くと、非表示のdivが表示されます。かなりきちんと滑らか。

私はjQueryを初めて使用しますが、それを行うための正しい軌道に乗る方法を誰かに教えてもらえますか？ありがとう。

アップデート1：

結果を得るために、次のようなものを書きました。問題は、Divが留まらないリンクにマウスを合わせると、すぐに消えてしまうことです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
       <script type="text/javascript">
        $(document).ready(function()
        {


    $("#show_div").mouseover(function() { $("#hello").css('visibility','visible'); });
    $("#show_div").mouseout(function() { $("#hello").css('visibility','hidden'); });


        });
        </script>

    </head>

    <body>

    <a id="show_div" href="#">Link text</a> 
    <div id="hello" style="visibility:hidden;">
        <ul>
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ul>
    </div>


    </body>
    </html>

Divの上にマウスを置いたときにDivが表示されたままになるようにするにはどうすればよいですか？

4

3 に答える 3

13

リンクテキストの上にマウスを置くと、div"hello"の可視性を表示に設定します。次に、div "hello"の上にマウスを置くと、div"hello"の可視性も表示に設定します。div "hello"のマウスアウトで、その可視性を"hidden"に設定します。このようなもの：

$("#show_div").mouseover(function() { $("#hello").css('visibility','visible'); });
$("#hello").mouseover(function() { $("#hello").css('visibility','visible'); });
$("#hello").mouseout(function() { $("#hello").css('visibility','hidden'); });
于 2010-06-26T08:04:14.143 に答える
6

.hover関数を使用できます。

$(function() {
    $('#divOne').hover(function() { 
        $('#divTwo').show(); 
    }, function() { 
        $('#divTwo').hide(); 
    });
});

2つのdivがある場所：

<div id="divOne">div one</div>
<div id="divTwo" style="display: none;">div two</div>

アップデート：

コメントセクションで述べたように、マウスが最初のdivを離れると、2番目のdivは消えます。目的の動作を実現できるプラグインはたくさんあります。これは特に見栄えがします。

于 2010-06-26T07:30:52.377 に答える
0

単純なHTMLの場合：

<div class="div1">Hover me</div>
<div class="div2" style="display: none">Hi, there</div>

通り過ぎるときdiv1はdiv2、を表示し、ユーザーがその中に入ると終了した後にのみ非表示にします。

<script type="text/javascript">
$('.div1').hover(function() {$('.div2').show()});
$('.div2').hover(function() {}, function() {$('.div2').hide()});    
</script>

これは迅速で最適ではないソリューションですが、2つのdivが隣接していなくても機能します。

于 2010-06-26T07:48:07.957 に答える