伪元素与z-指数
伪元素与z-指数
提问于 2016-05-19 11:05:37
在悬停时，我需要一个伪元素来淡入。实现这一目标的途径是：
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指数，但没有运气。
编辑
我只想澄清：
地球应该出现在彩虹圈后面--每一个彩虹圈。
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-05-19 11:41:06
不要给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>
Stack Overflow用户
发布于 2016-05-19 11:25:06
li:before {
pointer-events: none;
}
li:hover {
z-index: 0;
}首先，css部分是让它只工作在彩虹悬停，而不是rainbow+globe悬停。第二部分是使悬停的列表项低于其他列表项，从而使全局位于其他列表项之后。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37321344
复制相关文章
相似问题
腾讯云开发者
