Question

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

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

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

1 个答案: