带显示的CSS3转换fadein：无

我有一些元素想用CSS3减弱。它可以简单地由两个具有

不透明度：0

和

不透明度：1

的类来完成，但问题是褪色元素是某个下拉菜单，它的下方有元素，所以即使它的不透明度为0，它仍然是“可点击的”，而下的元素则不是

如果我添加

显示：无属性，元素未设置动画。

是否可以仅使用css来避免它

我查过了，但没有找到有效的解决办法

您可以使用以下命令使元素不接受单击：

.hidden
{
    pointer-events:none;
}

通过将z索引应用于负值，尝试创建不接受单击的元素

a{z-index: -999;}

哦!！我理解你的问题。您可以设置
可见性：折叠比隐藏好。
不要使用
显示：无
，尝试使用
可见性：隐藏


请参见哪些国家：

尽管CSS基本长方体模型规范中说
“可设置动画：否”

注意到上面JS Fiddle中的示例已损坏，修复了此处的代码：

 <style>
div {
    position: absolute;
    transition: all 2s;
}
div.opa {
    opacity: 0;
    visibility:hidden;
}
</style>
<div class=opa>dsdsds</div>
<br> <br>
<p><a href="#">clickme</a></p>
<script>
$('a').click(function(){
    $('div').toggleClass('opa');    
})
</script>


div{
位置：绝对位置；
过渡：所有2；
}
opa分部{
不透明度：0；
可见性：隐藏；
}
DSD




$（'a'）。单击（函数（）{
$（'div'）.toggleClass（'opa'）；
})

修正了：
你可以通过100%纯CSS代码来完成

.menu > li > ul{
    display: none;
}
.menu > li:hover > ul {
    display: block;
    animation-duration: 0.5s;
    animation-name: fadeInFromNone;
    animation-fill-mode: forwards;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-name: fadeInFromNone;
    -webkit-animation-fill-mode: forwards;
    -ms-animation-duration: 0.5s;
    -ms-animation-name: fadeInFromNoneIE;
    -ms-animation-fill-mode: forwards;
}
@-webkit-keyframes fadeInFromNone {
    0% {
        opacity: 0
    }

    1% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes fadeInFromNoneIE {
    0% {
        opacity: 0
    }

    1% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes fadeInFromNone {
    0% {
        opacity: 0
    }

    1% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

您能提供一个演示吗？如果您想禁用它，那么您可能还想使用jquery。如果是这样的话，你可以很容易地为悬停编写样式，同时也可以禁用下拉菜单。@RoyMJ我认为CSS3转换的目的是不将jQuery用于此类动画。我知道我可以简单地。fadeIn（）但是我想坚持CSS3浏览器支持非常好，当然IE除外。那么我不能接受它，当你进入下拉菜单位置，点击下拉不透明度0覆盖的标题内的“注册”时，网站将不可用。因此，你的问题的逻辑答案是，如果你需要IE支持，仅使用CSS是不可能的。你会想改用JavaScript。visibility仍然会阻塞。与@Ben的答案
指针事件相结合的工具提示效果很好：无使用
显示：当元素不为
时无
：悬停将使淡出瞬间（根本没有动画）。直到今天，我仍然找不到更好的解决办法。