java前端:鼠标悬浮显示图片

html写法如下,注意:放图片一定需要一个DIV或者LI等,一定要有一个容器,且固定大小

<div id="idd" class="classs">
	<img src="images/***/***.png"/>
</div>

对应CSS如下,首先定义div框大小,利用hover关键字定义图片是否显示

#idd {
 position: absolute;
 left: 125px; //位置和大小自己定义
 top: 171px; 
 width: 20px; 
 height: 20px;
 cursor: pointer;//cursor即鼠标悬浮时鼠标样式,pointer为小手
}
#idd img{
 display:none;
}
#idd:hover img{
 display:block;
}

踩过的坑:开始没有定义好div大小,没有固定,所以出问题

猜你喜欢

转载自blog.csdn.net/qq_36187544/article/details/81456089