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

Posted 2023-03-06

【中文标题】如何仅使用 CSS 创建淡入/淡出效果？

【英文标题】：How can I create a fade in/fade out effect using only CSS?

【发布时间】：2014-01-09 07:52:46

【问题描述】：

我想只使用 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>

【问题讨论】：

你已经尝试了什么？

***.com/questions/11679567/…

我再次编辑了我的代码检查

【参考方案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