我有一个显示游戏名称的 div (div2) 当用户将鼠标移到这个(div2)上时，两个 div(div1 和 div3)应该同时打开
div(div1 & div3) 将包含什么:
- div1 应该显示我的游戏的小图像，而
- div3 应该显示关于我的游戏的简短描述。
div的位置:
div2 应该在第二行可见。(在两个 div div1 和 div3 的中间)
div1 应该在顶部可见。(游戏图像)
div3 应该在底部可见。
而且当用户将鼠标从 div1 和 div3 移开时，这两个 div 都应该隐藏并保持打开 div2。
我试图用下面的代码解决我的问题，但它根本没有帮助我。 请检查下面的代码，并为我的问题建议一个好的解决方案。
我的代码:
<html>
<head>
<title>This example will showw game description on over the game link (above div will show game image and below will show game details info)</title>
<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(){
$("#d1").hover(function()
{
$("#d1").hide();
$("#d2").show();
$("#d3").show();
});
$("#maindiv").mouseout(function()
{
$("#d1").show();
$("#d2").hide();
$("#d3").hide();
});
});
</script>
</head>
<body>
<div id="maindiv">
<div id="d1">Tic Tac Toe(This should hide on mouse over this div)</div>
<div id="d2" style="display: none;"> <img src="http://www.infosys.com/SiteCollectionImages/cloud-ecosystem-hub-mm.jpg" title=" Image of Tic tac toe small image" /></div>
</div>
<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>
</body>
</html>
最佳答案
试试这个:http://jsbin.com/uyoxip/1/edit
<div id="maindiv" style='margin:0 auto; width:100%;'>
<div id="d2" style="display: none; float:left; width:500px;">
<img src="http://www.infosys.com/SiteCollectionImages/cloud-ecosystem-hub-mm.jpg" title=" Image of Tic tac toe small image" />
</div>
<div id="d1" style='float:left; width:500px;'>
Tic Tac Toe(This should hide on mouse over this div)
</div>
<div id="d3" style="display: none; float:left; width:500px;">
<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>
脚本:
$(document).ready(function(){
$("#maindiv").hover(function(){
$("#d2").stop().slideDown();
$("#d3").stop().slideDown();
$("#d1").stop().slideUp();
},function(){
$("#d1").stop().slideDown();
$("#d2").stop().slideUp();
$("#d3").stop().slideUp();
});
});
关于javascript - 如何在鼠标悬停在第一个 div 上时显示两个 div 并在鼠标移开时隐藏相同的两个 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13392475/