Question

我需要在悬停时在li下重复添加一个阴影png，以获得更好的＆＃34;效果，但是我仍然会让阴影显示出来，即使我给它一个负面的z指数，或者低于它本身的z指数。

CSS：

.navbar-default .navbar-nav > li:hover {
    z-index:300;
}

.navbar-default .navbar-nav > li:hover > a::after {
    content: "";
    background: rgba(0, 0, 0, 0) url("../img/shadow.png") repeat scroll 0 0;
    display: block;
    position: absolute;
    width:100%;
    height:100%;
    left: 7px;
    top: 7px;
    z-index: -1000;
}

您可以在此处查看实时网站：http://florin-pop.com/work/Visa%20Menu/index.html

我尝试了所有我能想象的但却无法找到解决方案。

林

Answer 1

您当前的代码在这里生成一个伪元素......

<li>
    <a>
        [textNode]
        ::after /* here is your pseudo element */
    </a>
</li>

您无法使用z-index强制元素隐藏在构成当前堆叠上下文基础的元素后面。在这种情况下，您的<a>（.navbar-default .navbar-nav > li > a { z-index: 3; }）。

我建议在这里生成你的元素会更好......

<li>
    ::before /* here is your pseudo element */
    <a>
        [textNode]
    </a>
</li>

这将消除完全使用z-index的需要，因为在子元素（<a>）之前生成伪元素。

将CSS更改为以下内容应该有效...

.navbar-default .navbar-nav > li:hover::before { ... }

使用:: before在元素下添加阴影

1 个答案: