Question

我正在维护一个遗留站点，在这个站点上有一个奇怪的鼠标悬停问题。它不会发生在IE中，但它确实在Chrome中发生。我试图看看问题是什么，但我找不到它。看起来扩展图像也对鼠标悬停图像做出反应。这是网址。当您将鼠标悬停在图像上然后翻过+时会发生这种情况。

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

Answer 1

右键单击（控制+单击Mac）和检查元素，然后非常缓慢地鼠标悬停。

该+的脚本正在添加一个与图像位置混淆的样式，并使您的+从光标下移出。如果你慢慢走，你就会确定它发生的那一刻。

在：

<div class="contentAsset contentAsset-hover contentAsset-hover-delayOff_500 
contentAsset-large contentAssetLast" style="position: relative; overflow-x: 
hidden; overflow-y: hidden; " id="qid_15">

出：

<div class="contentAsset contentAsset-hover contentAsset-hover-delayOff_500 
contentAsset-large contentAssetLast" style="" id="qid_15">

您可能还会查看控制台，发现很多错误。

Answer 2

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

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位置：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!

Answer 3

尝试定义高度，而不是尝试使用填充来定义它，尽管这似乎不会改变chromes编辑器中的任何内容。

我假设您正在使用morph属性在某处定位某些js？如果是这样，请提供js。

或者你可以只使用CSS3; http://ice.im/animatedlink/

我刚刚为你做了这件事，你的HTML只是简单：

<!-- language: lang-html -->    
<div class="image"><a href="#"></a><img src="image.jpg" /></div>

只需将课程更改为您想要的内容

在图像上闪烁鼠标悬停

3 个答案: