Question

我真的很害怕会发生什么。我正在建立一个带有一些动画的小网站，带有一些jQuery的CSS 3D变换。

这段代码有点太长了，所以我创建 this jsfiddle 。

无论如何，结构非常简单（这只是完整代码，对于article有非供应商前缀）：

<section>
  <article>
    <h1>2012</h1>
  </article>
  <article>
    <h1>2013</h1>
  </article>
</section>

.article {
  position: absolute;
  width: 370px;
  height: 250px;
  margin-bottom: 120px;
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  background: grey;
  z-index: 50;
  box-shadow: -5px 0 3px -4px rgba(0, 0, 0, 0.6);
  -webkit-box-reflect: below -10px -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0.2) 0%, transparent 40%, transparent 100%);
  transition: margin-top 0.3s, width 0.3s, height 0.3s, -webkit-transform 0.3s, top 0.3s, left 0.3s;
  transform: perspective(900px) rotateY(25deg) translateZ(-90px);
}

section article:hover {
  margin-top: -30px;
  width: 430px;
  height: 310px;
  cursor: pointer;
  box-shadow: 0 0 50px 20px rgba(0, 0, 0, 0.2);
  transition: all 0.8s;
  transform: perspective(100px) rotateY(0deg) translateZ(0);
}

问题是，当我访问该页面时，:hover有时会工作，有时则不会。 似乎有时其他一些元素超出了文章 - 看到没有更多的元素，这是不可能的。实际上没有必要添加z-index（点击文章后会出现一个类.activo），没有它发生相同的情况。有时候工作，有时候不是......

请尝试link to example并重新加载几次。这种情况发生在Safari，Chrome和Firefox中 - 似乎在FF中工作得更好。

刚刚发现，我重新加载页面时加载我快速使用鼠标 - 悬停文章 - 然后它正常运行< / strong>如预期的那样。如果我等到它被加载以进行悬停，它就不起作用。

此外，还有一些jQuery可以管理以下文章，对于悬停的文章更加向右。我必须使用JavaScript，因为他们必须在悬停兄弟元素后找回该位置，甚至不能使用margin-right来悬停它，因为它们是绝对定位的元素 - 并且它们应该是绝对的，因为点击后他们，他们覆盖整个身体。

$('article').hover(function (event) { $(this).nextAll('article').each(function () { izquierda = izquierda_original[$(this).attr('id')].izquierda + 360; $(this).css('left', izquierda + 'px'); }); }, function (event) { $(this).nextAll('article').each(function () { izquierda = izquierda_original[$(this).attr('id')].izquierda; $(this).css('left', izquierda + 'px'); }); });

izquierda_original[]只是一个包含每个元素的left原始值的对象。

提前致谢。

编辑我最终发现问题是body元素。当它的高度出现时，我不能将它们悬停。这更奇怪了。这就像body将它们作为子元素一样悬停。

Answer 1

由于某种原因，body标签覆盖了您的元素。

以下是为我解决的问题。

首先将z-index添加到body标签中，如下所示：

body{
z-index: 1;
position: relative;
}

然后在该部分添加更高的z-index：

section{  
z-index: 2;
position: relative;
}

这将保留您的背景并保持元素正常运行。

z-index或：悬停有时工作，有时不工作

1 个答案: