24
2018
04

【教程】鼠标经过图片在其上显示一个小图标(一)CSS写法

效果说明:鼠标经过图1,变成图2样式,IE8下测试通过

                                 图1

                                 图2

下面介绍使用css来写

css代码

#c1 {
	width: 300px;
	height: 250px;
	border: 1px solid #000;
	position: relative;
}
#c1 .img1 {
	width: 300px;
	height: 250px;	
}
#c1 #c1_1 {
	width: 300px;
	height: 56px;
	line-height: 50px;
	text-align: center;
	position: absolute;
	left: 0;
	top: 144px;	
	display:none;	

}
#c1 #c1_2 {
	width: 300px;
	height: 50px;
	line-height: 50px;
	text-align: center;
	position: absolute;
	left: 0;
	top: 200px;	
	background: #F00;
}
#c1 #c1_2 a {
	color: #ffffff;
	text-decoration: none;
	font-weight: bold;
}
#c1 #c1_2 a:hover {
	color: #fff;
	text-decoration: underline;	
	font-weight: bold;	
}
#c1:hover #c1_1{
	display:block;	
}

html代码

<div id="c1">
	<img src="img02.jpg"  class="img1"/>
    <div id="c1_1"><img src="icon01.png"/></div>
	<div id="c1_2"><a href="#">海运服务</a></div>
</div>


打赏
« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。