我知道使用jQuery hide()可以轻松实现效果.这里的目标是用纯CSS代替它.淡出结果必须具有display：none,因此元素占用页面布局上的零空间(因此visibility：hidden不是一个选项).
我成功地在显示器上使用纯CSS制作了淡入效果：没有使用动画而不是过渡的对象,但是如果不使用javascript setTimeout方法,我就无法使其淡出效果.
这是我到目前为止所得到的：
function aaa(){
document.getElementById("b").style.display = "inline-block";
}
function bbb(){
setTimeout(function(){ document.getElementById("b").style.display = "none"; },1000);
}
#b {
display: none;
opacity: 0;
-webkit-transition: all 1s; /* Safari */
transition: all 1s;
background: skyblue;
}
#a:hover ~ #b {
opacity: 1;
-webkit-animation: animate 1s; /* Chrome,Safari,Opera */
animation: animate 1s;
}
@keyframes animate {
0% {opacity: 0;}
100% {opacity: 1;}
}
div {
width: 58px;
height: 58px;
vertical-align: middle;
border: 1px solid black;
line-height: 58px;
text-align: center;
}
#a {
background: tomato;
}
#c {
background: greenyellow;
}
<div id=a onmouseenter="aaa()" onmouseleave="bbb()">OVER</div> <div id=b>B</div> <div id=c>C</div>
是否有可能使用零javascript达到相同的结果？
解决方法
因为你无法使用CSS动画显示：none,所以这是使用height的替代方法
#b {
height:0;
transition: 1s;
overflow: hidden;
background: skyblue;
}
#a:hover ~ #b {
height: 58px;
}
div {
width: 58px;
height: 58px;
vertical-align: middle;
border: 1px solid black;
line-height: 58px;
text-align: center;
}
#a {
background: tomato;
}
#c {
background: greenyellow;
}
<div id=a>OVER</div> <div id=b>B</div> <div id=c>C</div>
如果你需要身高：自动,你可以像这样使用max-height
#b {
max-height:0;
padding: 0px 0;
transition: 0.5s ease-in-out;
overflow: hidden;
background: skyblue;
}
#a:hover ~ #b {
max-height: 150px;
padding: 20px 0;
transition: 0.8s ease-in-out;
}
div {
width: 58px;
height: auto;
padding: 20px 0;
vertical-align: middle;
border: 1px solid black;
text-align: center;
}
#a {
background: tomato;
}
#c {
background: greenyellow;
}
<div id=a>OVER</div> <div id=b>B</div> <div id=c>C</div>
