0

我正在尝试制作悬停效果，其中父元素（例如导航元素）仅在子元素覆盖的部分变得透明。这样我就可以看到设置在网站主容器上的背景图像。是否有纯 css 解决方案或者我应该使用 javascript (jquery) 来实现这样的效果？或者，它甚至可能吗？

起点http://jsfiddle.net/gBsEA/4/

<div id="container">
<nav>
    <ul>
        <li><a href="#">Thank</a></li>
        <li><a href="#">You</a></li>
        <li><a href="#">Very</a></li>
        <li><a href="#">Much</a></li>
    </ul>
</nav>
</div>
4

2 回答 2

2

调整不透明度将不起作用。但是，您可以使用背景图像做一个技巧：

#container {
    width: 500px;
    height: 300px;
    background: url(http://www.dj-photo.com/files/2813/5912/7137/chilli-abstract_500px.jpg) no-repeat fixed 0 -40px;
    padding-top: 50px;
}
nav {
    width: 400px;
    background-color: #CCC;
}
nav ul {
    list-style: none;
    padding: 5px;
}
nav li {
    display: inline-block;
    padding: 10px;
    background: #e9e9e9;
    text-transform: uppercase;
    font-family: sans-serif;
}
nav li:hover {
    background: url(http://www.dj-photo.com/files/2813/5912/7137/chilli-abstract_500px.jpg) no-repeat fixed 0 -40px;
}

background在这种情况下，您只需对悬停元素重复。如果您使用该fixed值，则不必在每个元素上重复它。

小提琴参考：http: //jsfiddle.net/audetwebdesign/x5e2C/

于 2013-03-18T19:04:57.993 回答
1

答案是否定的，您不能仅使用 CSS 对元素的一部分设置不透明度。此外，在这种情况下，您需要影响祖先元素，这也是不可能的。

一种可能的解决方案是在 LI:hover 上设置相同的背景图像，并适当地定位它，使其看起来好像您正在看到祖先元素的背景。

http://jsfiddle.net/gBsEA/7

nav li.three:hover {
    background: url(myfile.jpg) no-repeat -280px -100px;
    color: #fff;
}
于 2013-03-18T18:40:34.527 回答