Question

#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库来实现它。

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

Answer 2

我会亲自通过jquery来做。

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

JQ

$('#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来实现此目的。

超链接悬停上的CSS3过渡

3 个答案: