css - 超链接悬停时的 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;
}

---

如果它必须在里面，我建议使用jQuery之类的 Javascript 库来实现它。

---

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

Answer 2

我会亲自通过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/

Answer 3

是的，这是可能的，例如：

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

使height,width锚标记的 与 相同#main。因此，当您将链接悬停时，它会给您带来整个#main. 否则，您可以使用jquery它。