Div to show and stay on mouse hover - Stays up even when mouseout

I've been playing around with several ways of hover divs, but most of the methods I tested only stay up when the mouse is hovering over the link.

What I want to achieve is for the div to appear on hover of another div, but 开发者_运维知识库stays up even when the mouse leaves the div button.

An example would be: http://www.prixtel.com/

I don't mind if it's just CSS or mixed with Jquery/JS.

Thank you!

My sample: http://jsfiddle.net/h4rB9/1/

---

Bind the event that makes the div visible (turning off display: none or whatever) to the mouseover event using something like the jQuery .mouseover() bind. If you don't specify a .mouseout() bind then it won't go away.

---

That website is using script for that effect.

If you want to use JavaScript:

var myDiv = document.getElementById("myDiv");
if (document.addEventListener) {
  myDiv.addEventListener("mouseover", function () {
    // whatever it is you're doing on mouseover here
  }, false);
} else if (document.attachEvent) {
  myDiv.attachEvent("onmouseenter", function () {
    // whatever it is you're doing on mouseover here
  });
} else {
  myDiv.onmouseover = function () {
    // whatever it is you're doing on mouseover here
  }
}

jQuery:

// I prefer mouseenter to mouseover, and jQuery lets you do that as does IE with attachEvent

$("#myDiv").mouseenter(function () {
  // whatever it is you're doing on mouseover here
});

As the other poster noted, the key is to omit the mouseout event - using hover automatically includes the mouseout behavior.