2

onmouseover/onmouseout イベントが発生したときに、画像に情報を表示しようとしています。私が達成したいのは、このウェブサイトがトップセラーで行うようなことです.

私のコードは次のようなものです：

<div class="container" onmouseover="$('#info').css('display','block');" onmouseout="$('#info').css('display','none');">
<img src=...">
    <div id="info" style="display:none">
       ... some text ...
</div>
</div>

そのため、div 情報ブロックは最初は非表示になっていますが、マウスが画像上にある場合は、対応する画像に情報を表示する必要があります (テキストをよく表示するために、画像の背景色を濃くします)。でもなんかうまくいかない。この問題にアプローチする方法を提案していただければ幸いです。

編集: div id 情報が css に存在しないことを忘れていました。ルールを動的に作成して本文に添付する必要があるかどうかはわかりません。さらに、ユーザーがマウスをオン/アウトした画像（一意のdiv IDを含む）に対応するテキストを表示/非表示にする必要があるため、インラインを使用することを選択した理由。つまり、多くの div コンテナーがあり、各コンテナーには一意の div id があります。

4

8 に答える 8

1

代わりにインラインonmouseoverでこれを使用してくださいonmouseout：

$('.container').mouseover(function() {
    $('#info').show();
}).mouseout(function() {
    $('#info').hide();
});

また、/ の代わりに / を使用することをお勧めshow();しhide();ますcss('display','block');。css('display','block');

したがって、コードは次のようになります。

<div class="container">
   ...
   <div style="display:none" id="info">
      ...
   </div>
</div>
<script type="text/javascript">
    $(document).ready(function() {
        $('.container').mouseover(function() {
            $('#info').show();
        }).mouseout(function() {
            $('#info').hide();
        });
    });
</script>
于 2012-04-13T09:28:17.320 に答える
0

私はあなたのやり方が間違っていると思います

これを試してみてください

    <html xmlns="http://www.w3.org/1999/xhtml">

            <head>
                <title>Horton Computer Solutions Home</title>

            </head>
            <style type="text/css">
            .container{
            width:100px;
            }

            </style>
            <script type="text/javascript">
            function over(){

            document.getElementById("info").style.display="block"
            }
            function out(){
            document.getElementById("info").style.display="none"
            }
            </script>
        <body>

            <div class="container">
    <img src="" alt="asdasd" onmouseover="over()" onmouseout="out()">
    <div id="info" style="display:none">
       ... some text ...
        ... some text ...
         ... some text ...
          ... some text ...
           ... some text ...
            ... some text ...
    </div>
    </div>



            </body>
            </html>
于 2012-04-13T09:44:03.980 に答える
0

このコードを試してください。onmouseoverイベントの画像が置き換えられます。ただし、InternetExplorerでは機能しません。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>onmouseover, onmouseout test</title>
</head>
<body>
<img src="image1.png" alt="" onmouseout="this.src='image1.png'" onmouseover="this.src='image2.png'">&nbsp;
</body>
</html>
于 2012-04-13T09:45:13.997 に答える
0

まず、 onMouseOver タグ自体で何かを行うのではなく、関数を作成することをお勧めします。それは非常に読みにくくなり、ダブルクォートを使用して簡単に間違いを犯す可能性があり、構文エラーが発生します。

第二に、何がうまくいかないのですか？表示されませんか？ところで、 $('#info').show() と .hide() も使用できます。同じことをします。

于 2012-04-13T09:27:03.943 に答える
0

代わりにこれを使用してください：

 <div class="out overout">
  <span>move your mouse</span>
  <div class="in">
  </div>
</div>

 <script>
  var i = 0;
  $("div.overout").mouseover(function() {
    i += 1;
    $(this).find("span").text( "mouse over x " + i );
  }).mouseout(function(){
    $(this).find("span").text("mouse out ");
  });
</script>

デモはこちら

于 2012-04-13T09:28:08.883 に答える
0

ここに示すように、それをスクリプト タグに入れる必要があります 。

ページの下部に配置して、次のようにするとします。

$('#container').mouseenter (function() {
     $('#info').css('display','block');
});

と

$('#container').mouseout (function() {
     $('#info').css('display','none');
});
于 2012-04-13T09:28:30.350 に答える
0

あなたはこれを試すことができます：

<script type="text/javascript">
function showdiv() {
$(document).ready(function() {
$('#info').css('display','block');
});
}

function hidediv() {
$(document).ready(function() {
$('#info').css('display','none');
});
}
</script>

<div class="container" onmouseover="showdiv()" onmouseout="hidediv()">
于 2012-04-13T09:29:24.160 に答える
0

表示するには、divで「onMouseOut」イベントを作成する必要があります

このコードは機能します

    <img src="" style="width:50px;height:50px;" onmouseover="testOn();" >
<div onmouseout="testOut();" id="info" style="width:50px;height:50px;display:none;color:white;background-color:black;opacity:0.7; position:relative;top:-50px;">
    bla bla
</div>
<script type="text/javascript">
    function testOn()
    {
        $('#info').css('display','block');
    }

    function testOut()
    {
        $('#info').css('display','none');
    }
</script>
于 2012-04-13T09:31:02.160 に答える