Disappearing box on Hover
This code attempts to have a blue box appear when red senses the mouse hovering. I can get the blue box to be visible, but when the mouse leaves to hover over the blue box, it disappears! Not good. How do I make it stay?
I want to put a form in the blue box, but at this test, the blue box disappears when the mouse leaves the red bar. I put in code to keep the blue box visible on mouse over, but it conflicts whit the second "red.hide" function, animating open and closed. I've tried to put an "if statement" in the second "red.hide" function, but results were inconclusive.
How do I keep the blue box open?
[code]
<script type=text/javascript>
$(document).ready(function(){
$(".blue").hide(0,".blue");
$(".red").hover(
function () {
$(".blue").show("hover");
},
function () {
$(".blue").hide("hover");
}
);
});
</script>
<div class="red">
<p>red box</p>
</div>
<div class="blue">
<p>blue box</p>
</div>
[/code]
here's the css if you need it:
p {margin: 0px;}
.red {
background-color: red;
width: 80px;
height: 30px;
}
.blue {
background-color: blue;
width: 80px;
height: 60px;
}