javascript - Div 显示并保持鼠标悬停 - 即使鼠标悬停也保持

Question

我一直在尝试几种悬停 div 的方法，但我测试的大多数方法仅在鼠标悬停在链接上时才会生效。

我想要实现的是让 div 出现在另一个 div 的悬停上，但即使鼠标离开 div 按钮也会保持不变。

一个例子是： http: //www.prixtel.com/

我不介意它只是 CSS 还是与 Jquery/JS 混合。

谢谢！

我的样本：http: //jsfiddle.net/h4rB9/1/

Answer 1

该网站正在使用脚本来实现该效果。

如果你想使用 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
});

正如另一张海报所指出的，关键是省略 mouseout 事件 - 使用悬停自动包含 mouseout 行为。

Answer 2

使用 jQuery .mouseover() bind之类的东西将使 div 可见的事件（关闭显示：无或其他）绑定到 mouseover 事件。如果您不指定 .mouseout() 绑定，那么它不会消失。