我只想使用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>
您可以使用opacity
和轻松实现这一目标adjacent sibling combinator
。
在jsfiddle中查看供应商前缀版本。
#container + div {
transition: opacity .25s;
opacity: 0;
}
#container:hover + div {
opacity: 1;
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句