0

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

http://www.movi​​q.nl/zonz-schaduwdoeken-zonnezeilen

4

3 回答 3

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">

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

于 2012-05-08T15:57:17.923 回答
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 行）

这允许 + 号具有更多类似按钮的样式，并且可以更好地被所有浏览器识别。

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

在这里，小提琴示例！

于 2012-05-08T16:38:28.560 回答
0

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

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

或者，您可以只使用 CSS3；http://ice.im/animatedlink/

我刚刚为你做了那个，你的 HTML 再简单不过了：

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

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

于 2012-05-08T15:52:07.663 回答