0

nav要素などの親要素が子要素で覆われている部分だけが透明になるホバー効果を作成しようとしています。このようにして、サイトのメインコンテナに設定されている背景画像を見ることができました。純粋な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 だけで要素の一部だけに不透明度を設定することはできません。また、この場合、祖先の要素に影響を与える必要がありますが、これも不可能です。

考えられる解決策の 1 つは、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 に答える