display:none and block 不可當作淡入淡出

by ShadowKao

HTML

<div class="t1">
  hover我
</div>
<div class="test">
 我是隱藏的
</div>

CSS

.test
{
	width:100px;
	height:100px;
	transition:2s;
	/*background:rgba(255,0,0,0);*/
	background:red; 
	/*opacity:0;*/
	 display:none;
}
.t1
{
	width:100px;	
	height:100px;
	background:lightblue;
	transition:2s;
}
.t1:hover ~ div.test
{
	 /* opacity:1;*/
	 /*background:rgba(255,0,0,1);*/
	 display:block;
}