Mani maran Mani maran - 1 month ago 6
CSS Question

how to perform div hover shows another div but both div's are different form?

i have created two forms, one form having the div that div id is "one" second form having the another div id is "two".When div one hover the div two wants to be displayed. i have tried like this.

<form action="">
<div id="one">
<p>source of hover content</p>
</div>
</form>
<form action="">
<div id="two">
<p>destination of hover content</p>
</div>
</form>


In Css:

#two{
display: none;
}
#one:hover #two {
display: block;
}

Answer
var clr;
$(document).ready(function()
{
    $(function() {
        $("#one,#two").bind('mouseout', function(){
            clr = setTimeout( function(){$("#two").css("display", "none");} , 2000);
        })
    });
    $(function() {
        $("#one,#two").bind('mouseover', function(){
            clearTimeout(clr);
            $("#two").css("display", "block");          
        })
    });
});

var clr;
$(document).ready(function()
{
	$(function() {
		$("#one,#two").bind('mouseout', function(){
			clr = setTimeout( function(){$("#two").css("display", "none");} , 500);
		})
	});
	$(function() {
		$("#one,#two").bind('mouseover', function(){
			clearTimeout(clr);
			$("#two").css("display", "block");			
		})
	});
});
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<form action="">
<div id="one" style="border: 1px solid #000; width:200px;padding:5px;">
<p>source of hover content</p>
</div>
</form>
<form action="">
<div id="two" style="border: 1px solid #000; width:200px;padding:5px;display:none;">
<p>destination of hover content</p>
</div>
</form>

Comments