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

Question

我想只使用 CSS 来实现淡入淡出效果。如果我移动或悬停在一个 div 元素上，我需要调用另一个 DIV 来淡入，snd 然后它应该在鼠标离开时淡出 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>

Answer 1

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

查看jsfiddle 以获取供应商前缀版本。

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

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

Transition browser support

Adjacent sibling combinator (+ selector) documentation