How to show two divs on mouse over of the third div
Question
I am trying to implement like this(click me) .On the button of page you will find 4 images ,on mouse over of it,they shows info. Same things i am looking for. Below is my code But it is not working like the above given website.
<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>
Please help me to solve this issue.
My problem. Div is not hiding with good animation style. And while showing div(div name= d3). My page should little scroll down. and while on mouse out of my div(div name=maindiv). I to implement same like the above given link .
2 answers
solution1
3 2012-11-15 07:15:18
Try this demo please http://jsfiddle.net/PkQm5/
You can also read here for many other effects: http://docs.jquery.com/Effects
You can also use slideDown and slideUp or slideToggle
Hope this fits the cause :)
Code
$(document).ready(function() {
$("#d2").hover(function() {
$("#d3").show("slow");
});
$("#maindiv").mouseout(function() {
$("#d1").show("slow");
$("#d3").hide("slow");
});
});
solution2
1 ACCPTED 2012-11-15 07:44:29
Ok, so this is what I got, it basically replicates the behaviour as they have: jsfiddle
But please note that they have quite a complicated system of class modification going on (which you must have noticed if you have already looked at source). Mainly the trick is setting the css to be position:absolute; bottom:-1px; position:absolute; bottom:-1px; , where that bottom setting causes it to rise rather than drop as the height is modified.
Hopefully this is useful for you, good luck!
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.