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

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