超链接悬停时的 CSS3 过渡

Question

我有以下演示:http://jsfiddle.net/EHrk4/2/

#main 是否有可能保持不透明度 1 直到我将鼠标悬停在超链接上，然后它变为 0.3？

HTML:

<div id="main">    
    <a href="#">hover me to fade out main</a>
</div>

CSS:

#main {
    -webkit-transition: opacity 0.3s;
    -moz-transition: opacity 0.3s;
    -ms-transition: opacity 0.3s;
    -o-transition: opacity 0.3s;
    transition: opacity 0.3s;
    height:400px;
    width:400px;
    background:red
}

#main:not(:hover) {
    opacity: 0.3;
}

非常感谢任何指点。

Answer 1

否 - 您的链接在您想要影响的元素内，目前 CSS2 或 CSS3 中没有父选择器。

如果您的 anchor 是 div 的兄弟元素，您可以根据需要影响 div 的不透明度 - 就像这个快速 jsFiddle 示例。

在纯 CSS 中影响兄弟的例子:

HTML:

<a href="#">hover me to fade out main</a>
<div id="main">
</div>

CSS:

a:hover + #main {
    opacity:0.5;
}

---

如果它必须在内部，我建议使用 Javascript 库，例如 jQuery实现它。

---

或者，看看 the following answer ，其中解释了影响子元素的不透明度的解决方法。