1

我正在尝试像这样实现this(click me)。在页面按钮上，您会发现 4 张图像，在鼠标悬停时，它们会显示信息。我正在寻找同样的东西。下面是我的代码，但它不像上面给出的网站那样工作。

<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;，其中底部设置会导致它随着高度的修改而上升而不是下降。

希望这对你有用，祝你好运！

于 2012-11-15T07:44:29.057 回答