Question

我正在尝试像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）时。我要实现与上面给出的link相同的内容。

Answer 1

请尝试此演示 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");
    });
});

Answer 2

好的，这就是我得到的，它基本上复制了他们的行为：jsfiddle

但是请注意，他们有相当复杂的类修改系统（如果你已经查看过源，你必须注意到）。主要的诀窍是将css设置为position:absolute; bottom:-1px;，其中底部设置使其上升而不是随着高度的修改而下降。

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

如何在鼠标悬停第三个div上显示两个div

2 个答案: