如何仅使用CSS创建淡入/淡出效果?

马诺吉

我只想使用CSS进行淡入和淡出效果。如果我在一个div元素上移动或悬停,则需要调用另一个DIV来淡入,然后在鼠标离开时将其淡出agsin。DOM元素调用和效果应该在CSS或中CSS3我不能使用javascript和jQuery。

<style> 
#b
{
    width: 200px;
    height: 40px;
    background: red;
    border-radius: 10px;
    text-align: center;
    margin: 35px;
    padding: 30px 0px;
    box-shadow: 2px 4px 10px 2px;
    opacity:0;
    color: white;
    font: 20px bold;
}
#a
{
    width: 200px;
    height: 40px;
    background: rgb(156, 155, 155);
    border-radius: 10px;
    text-align: center;
    cursor: pointer;
    margin: 35px;
    padding: 30px 0px;
    box-shadow: 2px 4px 10px 2px;
    color: white;
    font: 20px bold;
}

#a:hover + #b { 
    animation:myfirst 1s;
    -webkit-animation:first 1s;
    opacity:1;
                }

@keyframes first
{
from {opacity:0.1;}
to {opacity:1;}
}

@-webkit-keyframes first 
{
from {opacity:0.1}
to {opacity:1;}
}

</style>

<div id="a">Hover</div>
<div id="b">show</div>
达米安

您可以使用opacity轻松实现这一目标adjacent sibling combinator

jsfiddle中查看供应商前缀版本。

#container + div {
    transition: opacity .25s; 
    opacity: 0;
}

#container:hover + div {
    opacity: 1;
}

过渡浏览器支持

相邻的同级组合器(+选择器)文档

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章