Bluefire Bluefire - 1 year ago 76
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 Source

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>
^^^^^^Hover Above^^^^^^

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download