3

I am really scared about what happens. I am building a little site with some animation, CSS 3D transform with a bit of jQuery.

The code it's a bit too long to put it on here, so I create this jsfiddle.

Anyway, the structure is very simple at all (this is just full code, with non vendor-prefixs, for 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);
}

The problem is, when I access to the page, the :hover sometimes work and sometimes not. It seems that sometimes some other element is over the article —which couldn't really be possible seeing that there are no more elements. There is really no need to add z-index (there's a class .activo which just comes up after clicking an article), and without it happens the same. Sometimes work, sometimes not…</p>

Please try on the link to example and reload it a few times. This happens in Safari, Chrome and Firefox —seems to work a bit better in FF.

Just found out, that when I reload the page and while loading I get fast to the elements with the mouse —hover articles— then it works as expected. If I wait until it's loaded to get hover, it doesn't work.

In addition, there's a bit of jQuery to manage the following articles to the hovered one goes more to the right. I have to do it with JavaScript because they must find the place back after hover a brother element, and can't even use margin-right to the hovered one because they are absolute positioned elements —and they should be absolute because after click them, they cover the whole body.

$('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[] is just an object containing the left original value of each element.

Thanks in advance.

EDIT I figure out finally that the problem is the body element. When the height of it arise the articles, I can't hover them. This is even more weird. It's like that body is hover they child elements.

4

1 回答 1

3

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

这是为我解决的问题。

首先z-index像这样在body标签中添加一个：

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

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

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

这将保留您的背景并保持元素的功能。

于 2013-03-24T11:14:41.107 回答