如何使用CSS创建淡入/淡出效果？ [英] How can I create a fade in/fade out effect using only CSS?

问题描述

我想使用CSS淡入和淡出效果。如果我移动或悬停在一个div元素，我然后需要调用另一个DIV淡入，snd然后它应该淡出agsin当鼠标离开。 DOM元素调用和效果应在 CSS 或 CSS3 中。我不能使用javascript和Jquery。

I want to do fade in and fade out effects using only CSS. If I move or hover over one div element, I then need to call another DIV to fade in, snd then it should fade out agsin when the mouse leaves. DOM element calling and effect should be in CSS or CSS3. I can't use javascript and 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 和相邻的兄弟姐妹组合器

You can easily achieve that with opacity and the adjacent sibling combinator.

http://jsfiddle.net/dY3bS/1/ =nofollow> jsfiddle 的供应商前缀版本。

Check out the jsfiddle for a vendor prefixed version.

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

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

转换浏览器支持

相邻同胞组合器（+选择器）文档

这篇关于如何使用CSS创建淡入/淡出效果？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！