您现在的位置是:首页 > 各类文章 > SEO优化网站首页SEO优化

鼠标悬停到图片上显示文字代码怎么解决,如何解决?

  • TEBSS
  • 2019-12-20 09:41:58
  • 452 次阅读
鼠标悬停到图片上显示文字代码当有的图片需要给用户显示信息,但是如果使用【title】提示,又觉得太没创意了现在给大家共享一款完整的代码...

鼠标悬停到图片上显示文字代码

当有的图片需要给用户显示信息,但是如果使用【title】提示,又觉得太没创意了

现在给大家共享一款完整的代码,就是鼠标悬停在图片上(图片可超链接)然后显示文字

附上完整代码:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>鼠标悬停图片上显示文字 在线演示 www.tebss.cn</title> 
<style> 
img{border:0}/* css 注释说明:设置图片边框为0 */ 
body{text-align:center;}/* 对齐方式 */ 
.divcss5{ position:relative;width:640px; height:1136px;margin:0 auto} /* 图片大小 */ 
.divcss5 a,.divcss5 span{display:none; text-decoration:none}
.divcss5:hover{cursor:pointer} 
.divcss5:hover a.now{cursor:pointer; position:absolute; top:0; width:100%; height:100%;
 z-index:100; left:0; display:block;}
.divcss5:hover span{ display:block;position:absolute; bottom:0; left:0;color:#FFF;width:640px; /* 文字底部大小阴影 */
z-index:10;height:36px; line-height:36px; background:#000;filter:alpha(opacity=60);-moz-opacity:0.5;opacity: 0.5;}
/* 设置显示文字定位位置,背景半透明 */ 
 
</style> 
</head> 
<body> 
 
<div class="divcss5" style="background:url(1.jpg)">  <!--图片地址-->
    <span>文字内容</span>
    <a href="#" class="now">&nbsp;</a>
</div> 
</body> 
</html>

这样就完美解决了想让用户看到信息,反而又不让用户主动点击,只要鼠标移动到图片上,就会自动显示啦!

效果图:(点击查看效果内容)

360截图20191205093027692.jpg

目前鼠标悬停文字、图片可以展示不同的效果:

当鼠标移动到图片上,底部图层上移显示信息,此处代码是有JS文件的,需要下载【modernizr.custom.zip


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
		<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
		<title>鼠标悬停图片上显示文字 在线演示 www.tebss.cn</title>
        <script src="modernizr.custom.js"></script>
<style type="text/css" >
 
/* 通用样式 */
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body, html { font-size: 100%; padding: 0; margin: 0;}
body {
	font-family: 'Lato', Calibri, Arial, sans-serif;
	color: #b3b9bf;
	background: #f9f9f9;
}
a {
	color: #888;
	text-decoration: none;
}
a:hover, a:active {
	color: #333;
}
.grid {
	padding: 20px 20px 100px 20px;
	max-width: 1300px;
	margin: 0 auto;
	list-style: none;
	text-align: center;
}
.grid li {
	display: inline-block;
	width: 440px;
	margin: 0;
	padding: 20px;
	text-align: left;
	position: relative;
}
.grid figure {
	margin: 0;
	position: relative;
}
.grid figure img {
	max-width: 100%;
	display: block;
	position: relative;
}
.grid figcaption {
	position: absolute;
	top: 0;
	left: 0;
	padding: 20px;
	background: #2c3f52;
	color: #ed4e6e;
}
.grid figcaption h3 {
	margin: 0;
	padding: 0;
	color: #fff;
}
.grid figcaption span:before {
	content: 'by ';
}
.grid figcaption a {
	text-align: center;
	padding: 5px 10px;
	border-radius: 2px;
	display: inline-block;
	background: #ed4e6e;
	color: #fff;
}
/* 说明文字样式 2 */

.cs-style-2 figure img {
	z-index: 10;
	-webkit-transition: -webkit-transform 0.4s;
	-moz-transition: -moz-transform 0.4s;
	transition: transform 0.4s;
}
.no-touch .cs-style-2 figure:hover img,
.cs-style-2 figure.cs-hover img {
	-webkit-transform: translateY(-90px);
	-moz-transform: translateY(-90px);
	-ms-transform: translateY(-90px);
	transform: translateY(-90px);
}

.cs-style-2 figcaption {
	height: 90px;
	width: 100%;
	top: auto;
	bottom: 0;
}

.cs-style-2 figcaption a {
	position: absolute;
	right: 20px;
	top: 30px;
}
  
</style>
		
	</head>
	<body>
		<br /><br /><br />
			
			<ul class="grid cs-style-2">
				<li>
					<figure>
						<img src="1.jpg" alt="img04">
						<figcaption>
							<h3>大标题</h3>
							<span>小标题</span>
							<a href="#">查看详情</a>
						</figcaption>
					</figure>
				</li>
				
			</ul>
		
	</body>
</html>

效果图:点击查看详情(点击查看效果内容)

360截图20191205094622988.jpg



www.tebss.com

TAG: 无标签

文章评论 (0)

    • 这篇文章还没有收到评论,赶紧来抢沙发吧~


Top