javascript - 鼠标悬停在图像上闪烁

Question

我正在维护一个遗留网站，但在这个网站上有一个奇怪的鼠标悬停问题。它不会在 IE 中发生，但会在 Chrome 中发生。我试图查看问题出在哪里，但找不到。看起来扩展图像也在对鼠标悬停图像使用react。这是网址。当您将鼠标悬停在图像上然后悬停在 + 上时，就会发生这种情况。

http://www.moviq.nl/zonz-schaduwdoeken-zonnezeilen

Answer 1

这里的问题是，当您悬停 + 号时，图像悬停事件丢失，因此浏览器不断从悬停状态变为非悬停状态。 这是由于您的代码发生了一些奇怪的事情...我建议您进行一些更改以使代码更简单和易于解释，当然，还要解决您的问题:

onmouseover 和 onmouseout 事件的脚本:

function endAssetButtons(el) {
  if (!Spif.isIE||!Spif.isIE7) {
    el.parentNode.style.position="";
    el.parentNode.style.overflow="";
  }
}
function startAssetButtons(el,id) {
  if (!Spif.isIE||!Spif.isIE7) {
    el.parentNode.style.position="relative";
    el.parentNode.style.overflow="hidden";
  }
}

正在向图像包装器 (div) 添加和删除一些 CSS。 这是错误的，应该删除，因为 CSS position:relative 和 overflow:hidden 应该始终存在，以允许 + 号始终相对于图像包装器 div 绝对定位。

因此，此 css 应该始终对所有浏览器可用:

.contentAsset {
  cursor: pointer;
  overflow: hidden;
  position: relative;
}

content.css(第 300 行)

这允许所有浏览器平等地处理 + 号并在动画被触发之前将其隐藏。

---

另外，+号的css应该改成:

.contentAssetButton {
    text-indent:-9999px;
    height: 15px;
    width: 15px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    top: -20px;
    display: block;
}

content.css(第 334 行)

这允许 + 号具有更像按钮的样式，并能更好地被所有浏览器识别。

至少这应该为您指明正确的方向!

在这里，the Fiddle Example!