Bluefire Bluefire - 4 months ago 13
jQuery Question

Make a div appear on onmouseover, but remain if the mouse hovers over it

I want to make a description box appear over an element when the mouse hovers over it, and disappear when it leaves. However, simply doing

$("element").mouseenter(function() {
// make box appear
}).mouseleave(function() {
// make box disappear
});


Will make the box disappear if the mouse is hovering over the box itself. How do I keep it on the screen as long as the mouse is either on the target element or on the box that appears beside it?

Answer

You don't even need javascript for this!

#square {
  height: 200px;
  width: 200px;
  line-height: 50px;
  vertical-align: middle;
  text-align: center;
  background-color: green;
  opacity: 0.0;
  filter: alpha(opacity=40);
  /* For IE8 and earlier */
}
#parent {
  height 200px;
  width: 400px;
  background-color: blue;
}
#parent:hover #square {
  opacity: 1;
}
<div id="parent">
  <div id="square">:-)</div>
</div>
^^^^^^Hover Above^^^^^^

Comments