伪元素和z-index

Question

JSFiddle

在悬停时我需要一个伪元素来淡入。这可以通过以下方式实现：

li:before{
  content: url("http://icons.iconarchive.com/icons/tatice/operating-systems/128/Globe-icon.png");
  position: absolute;
  z-index: -1;
  opacity: 0;
  transition: opacity .2s ease-in-out;
  top: -40px;
  left: -40px;
}

li:hover:before{
  opacity: 1;
  transition: opacity .2s ease-in-out;
}

问题是，伪图像出现在列表中它前面的项目上方。我怎样才能解决这个问题？我试过玩z-index但没有运气。

修改

只是为了澄清：

地球应该出现在彩虹圈后面 - 每个彩虹圈

Answer 1

请勿指定li一个z-index。

通过分配z-index，您没有让浏览器分配并正确调整堆叠顺序。

li:before {
  content: url("http://icons.iconarchive.com/icons/tatice/operating-systems/128/Globe-icon.png");
  position: absolute;
  z-index: -1;
  opacity: 0;
  transition: opacity .2s ease-in-out;
  top: -40px;
  left: -40px;
}

li:hover:before {
  opacity: 1;
  transition: opacity .2s ease-in-out;
}

li {
  margin: 10px;
  display: inline;
  position: relative;

}

<ul>
  <li>
    <img src="http://demo.chimerathemes.com/wp-content/themes/apppress/images/icons/included/color.png">
  </li>
  <li>
    <img src="http://demo.chimerathemes.com/wp-content/themes/apppress/images/icons/included/color.png">
  </li>
  <li>
    <img src="http://demo.chimerathemes.com/wp-content/themes/apppress/images/icons/included/color.png">
  </li>
</ul>

Answer 2

li:before {
    pointer-events: none;
}
li:hover {
    z-index: 0;
}

第一个css部分是让它只适用于彩虹悬停而不是彩虹+地球悬停。第二部分是将悬停列表项目放在其他列表项目下方，导致地球仪位于其他列表项目的后面。