CODEWITHSUNDEEP
jquerycsshoverz-index
pzin
pzin

Reputation: 4248

z-index or :hover sometimes work, sometimes not

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…

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.

Upvotes: 3

Views: 3760

Answers (1)

bukka
bukka

Reputation: 5203

For some reason the body tag is overlaying your elements.

Here is what fixed it for me.

First add a z-index to the body tag like so:

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

Then add a higher z-index to the section:

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

This will retain your background and keep the element functional.

Upvotes: 3

Related Questions