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中没有父选择器。

如果你的锚是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来实现它。

---

或者，看看下面的答案，它解释了不透明度影响子元素的解决方法。

我个人会使用jquery。

http://jsfiddle.net/EHrk4/5/

金桥

$('#link').hover(function(){
    $('#main').addClass('hover');
}, function(){
   $('#main').removeClass('hover');
})

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
}
.hover {
    opacity: 0.3;
}

编辑:

从我们的评论，这是如何做到这一点，同时仍然保持子元素的不透明度为1。

http://jsfiddle.net/EHrk4/11/

这是可能的，例如:

#main,a{
   display:block;
   height:100px;
   width:100px;
}

使锚标记的height,width与#main相同。所以当你悬停链接时，它会给你整个#main的效果。否则，您可以使用jquery。