1

私は次のように実装しようとしてthis(click me)います。ページのボタンに4つの画像があり、その上にマウスを置くと、情報が表示されます。私が探しているのと同じもの。以下は私のコードですが、上記のWebサイトのようには機能しません。

<html>
<head>
<link href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<script>

            $(document).ready(function(){
              $("#d2").hover(function()
              { 
                  $("#d3").show();
              });

               $("#maindiv").mouseout(function()
              {
                $("#d1").show(); 
                  $("#d3").hide();
              });
            });

            </script>
</head>

<body>
<div id="d2" > <img width="160px" src="http://www.infosys.com/SiteCollectionImages/cloud-ecosystem-hub-mm.jpg" title=" Image of Tic tac toe small image" /></div>
<div id="maindiv">
  <div id="d3" style="display: none;">
    <table width="80px" height="26px" border="1">
      <tr>
        <td width="200px"> Information/description about tic tac toe in small para. blah blah blah </td>
      </tr>
    </table>
  </div>
</div>
</body>
</html>

この問題を解決するのを手伝ってください。

私の問題。Divは良いアニメーションスタイルで隠れていません。そして、div（div name = d3）を表示している間。私のページは少し下にスクロールする必要があります。そして、私のdiv（div name = maindiv）からマウスを離している間。上記の リンクと同じように実装します。

4

2 に答える 2

3

このデモをお試しください http://jsfiddle.net/PkQm5/

他の多くの効果についてもここで読むことができます：http：//docs.jquery.com/Effects

slideDownおよびslideUpまたはを使用することもできますslideToggle

これが原因に合うことを願っています:)

コード

$(document).ready(function() {
    $("#d2").hover(function() {
        $("#d3").show("slow");
    });

    $("#maindiv").mouseout(function() {
        $("#d1").show("slow");
        $("#d3").hide("slow");
    });
});​
于 2012-11-15T07:15:18.147 に答える
1

さて、これは私が得たものです、それは基本的に彼らが持っているように振る舞いを複製します：jsfiddle

ただし、クラス変更の非常に複雑なシステムが進行中であることに注意してください（すでにソースを確認している場合は、これに気付いているはずです）。主な秘訣は、cssをに設定することposition:absolute; bottom:-1px;です。この設定では、高さを変更すると、cssが下がるのではなく、上になります。

うまくいけば、これがあなたに役立つことを願っています、頑張ってください！

于 2012-11-15T07:44:29.057 に答える