CSS3鼠标:hover经过元素呼出显示图片

当鼠标停留在设置的元素时呼出图片，移开后隐藏。

CSS代码

.xulgr-hovershow .xulgr-hovershow-img {
	opacity:0;
	transform:translateY(6px);
	transition:.4s;
}
.xulgr-hovershow:hover .xulgr-hovershow-img,.xulgr-hovershow:hover{
	opacity:1;
	transform:translateY(0);
}
.xulgr-hovershow{
	position:relative;
	cursor:pointer;
	z-index:10;
}
.xulgr-hovershow .xulgr-hovershow-img{
	position:absolute;
	visibility:hidden;
}
.xulgr-hovershow:hover .xulgr-hovershow-img,.xulgr-hovershow:hover~.xulgr-hovershow-img,.xulgr-hovershow:hover{
	visibility:unset;
}
.xulgr-hovershow-img img{
	height: 100px;
	box-shadow: 0 5px 10px rgba(0,0,0,.2); border-radius:4px;
}

 

html代码

	<a class="xulgr-hovershow" href="javascript:;">
		鼠标经过这里呼出图片
		<div class="xulgr-hovershow-img">
			<img src="http://xg-ink.oss-accelerate.aliyuncs.com/call/wx.png" alt="扫一扫加雪哥的微信">
		</div>
	</a>

 

运行DEMO