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

Question

我试图像this(click me)实现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）时。 我像上面给出的链接一样实现。

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; position:absolute; bottom:-1px; ，底部设置使其上升而不是随着高度的改变而下降。

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

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

问题描述

2 个解决方案

解决方案1
3 2012-11-15 07:15:18

解决方案2
1 已采纳 2012-11-15 07:44:29

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

问题描述

2 个解决方案

解决方案1 3 2012-11-15 07:15:18

解决方案2 1 已采纳 2012-11-15 07:44:29

解决方案1
3 2012-11-15 07:15:18

解决方案2
1 已采纳 2012-11-15 07:44:29