How to show two divs on mouse over on the first div and hide the same two divs on mouse out
Question
I have one div where i am showing my game name(div2) When a user moves her mouse on this(div2) then two divs(div1 & div3) should open on at the same
what divs(div1 & div3) will contains:
- div1 should show small image of my game, whereas
- div3 should show small description about my game.
Position of divs :
div2 should be visible in second row.(In the middle of the two divs div1 & div3)
div1 should be visible on the top.(game image)
div3 should be visible on the bottom.
And also when user mouse out their cursor from div1 & div3 then Both these divs should hide and remain open the div2.
I tried to solve my problem with my below code But it did't help me at all. Please check my code below and suggest me a good solution for my problem.
My code:
<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>
1 answers
solution1
0 ACCPTED 2012-11-15 06:50:28
try this: 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>
script:
$(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();
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.