Question

这似乎只是其他所有人想要的方式。我有一个像http://jsfiddle.net/kbu6szvb/这样的菜单/导航栏。

HTML：

<div id="nav"> 
<ul> 
<li id="special"><a href="">A</a></li> 
<li><a href="">B</a></li> 
<li><a href="">C</a></li> 
<li><a href="">D </a></li> 
<li><a href="">E</a></li>
</ul> 
</div>

CSS：

li {
    float: left;
    display: block;
}

a {
    display: block;
    transition: all 0.6s ease;
    padding: 15px;
    width: 25px;
    height: 25px;
}

a:hover {
        -webkit-box-shadow: inset 0px -50px 0px 0px rgba(229,229,229,0.8);
        -moz-box-shadow: inset 0px -50px 0px 0px rgba(229,229,229,0.8);
        box-shadow: inset 0px -50px 0px 0px rgba(229,229,229,0.8);
}

#special a {
        display: block;
        background-image: url('http://techcommunity.softwareag.com/c/wiki/get_page_attachment?p_l_id=10602&nodeId=11809&title=Preparing+Graphics+For+Your+Mobile+application&fileName=Preparing+Graphics+For+Your+Mobile+application%2FIconTrans.png');
        background-size: 25px 25px;
        background-repeat: no-repeat;
        background-position: center;
        text-indent: -9000px;
    }

当您将鼠标悬停在元素上时，它们将从底部到顶部以灰色填充。但我想要一个带有图像作为背景图像的主页按钮。当菜单元素为.active时，它应完全填充且不透明。可悲的是，正如你可以在小提琴中看到的那样，插入框阴影在背景图像上而不是在下面。

提前致谢

Answer 1

背景图片位于元素的最底部（背景），因此为了得到它，它必须被至少一个元素包裹。

您可以将灰色悬停移动到<li>后面的<a>，也可以保留代码，并使用<span>和背景图片。

这个更新的小提琴演示了如何将悬停移动到<li>：http://jsfiddle.net/kbu6szvb/1/

在背景图像后面插入阴影

1 个答案: