Question

我一直在玩几种悬停div的方法，但是当鼠标悬停在链接上时，我测试的大部分方法都会保持不变。

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

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

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

谢谢！

我的示例：http://jsfiddle.net/h4rB9/1/

Answer 1

使用类似jQuery .mouseover() bind之类的东西将使div显示的事件（关闭display：none或其他）绑定到mouseover事件。如果你没有指定.mouseout（）绑定，那么它就不会消失。

Answer 2

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

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

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

Div显示并保持鼠标悬停 - 即使在mouseout时也会停留

2 个答案: