纯css实现鼠标图片切换

最新推荐文章于 2023-08-02 17:02:02 发布

smilingovo

最新推荐文章于 2023-08-02 17:02:02 发布

阅读量2.3k

点赞数 3

文章标签： css css3 html

本文链接：https://blog.csdn.net/smily_forever/article/details/107142645

版权

纯css实现鼠标图片切换

原理：使用hover，position定位，以及父元素子元素的关系实现鼠标图片切换。页面简单易懂
HTML页面代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="picture.css"/>
		<title>纯CSS实现图片切换</title>
	</head>
	<body>
		<div class="maindiv">
			<ul>
				<li>
					<a href="img/picture1.png" target="_blank">1</a>
					<div class="change1">
						<img src="img/picture1.png" >
					</div>
				</li>
				<li>
					<a href="img/picture2.jpg" target="_blank">2</a>
					<div class="change2">
						<img src="img/picture2.jpg"  >
					</div>
				</li>
				<li>
					<a href="img/picture3.jpg" target="_blank">3</a>
					<div class="change3">
						<img src="img/picture3.jpg" >
					</div>
				</li>
				<li>
					<a href="img/picture4.jpg" target="_blank">4</a>
					<div class="change4">
						<img src="img/picture4.jpg" >
					</div>
				</li>
				<li>
					<a href="img/picture5.jpg" target="_blank">5</a>
					<div class="change5">
						<img src="img/picture5.jpg" >
					</div>
				</li>
			</ul>
		</div>
	</body>
</html>

CSS代码：

html,body{
	height: 100%;overflow-x: hidden;position: relative;
	background-image: url(img/bac.jpg);background-repeat: no-repeat;background-size: 100% 100%;
}
*{margin: 0;padding: 0;}
.maindiv
{
	width: 800px;height: 460px;box-shadow: 4px 8px 4px dimgray;
	margin-left: auto;margin-right: auto;margin-top:5%;
	position: relative;border-radius: 10px;
	background-image: url(img/picture5.jpg);background-size: 100% 100%; background-repeat: no-repeat;
}
ul
{
	width: 100%;height: 20px;
	margin-top:460px;float: left;
}
li
{
	list-style-type: none;float: left;
	height:50px;text-align: center;width:160px;
}
li>a{
	display: block;width:150px;height: 20px;margin-top: 15px;margin-left: 5px;border: 2px solid black;
	color:black;text-decoration: none;line-height: 20px;border-radius: 7px;box-shadow: 4px 4px 4px dimgray;
	}
img{width: 100%;height: 100%;}
.change1
{
	width: 100%;height: 100%;
	position: absolute;left: 0px;top: 0px;
	display: none;border-radius: 10px;overflow: hidden;
}
.change2
{
	width: 100%;height: 100%;
	position: absolute;left: 0px;top: 0px;
	display: none;border-radius: 10px;overflow: hidden;
}
.change3
{
	width: 100%;height: 100%;
	position: absolute;left: 0px;top: 0px;
	display: none;border-radius: 10px;overflow: hidden;
}
.change4
{
	width: 100%;height: 100%;
	position: absolute;left: 0px;top: 0px;
	display: none;border-radius: 10px;overflow: hidden;
}
.change5
{
	width: 100%;height: 100%;
	position: absolute;left: 0px;top: 0px;
	display: none;border-radius: 10px;overflow: hidden;
}
li:hover .change1{display: block;}
li:hover .change2{display: block;}
li:hover .change3{display: block;}
li:hover .change4{display: block;}
li:hover .change5{display: block;}
li:hover {border-color: red;}
li:hover a{color: red;font-size: 18px;font-weight: bolder;border-color: red;}

最终效果如下

css实现鼠标切换图片

smilingovo

关注

3
点赞
踩
27

收藏

觉得还不错? 一键收藏
0
评论
纯css实现鼠标图片切换

纯css实现鼠标图片切换原理：使用hover，position定位，以及父元素子元素的关系实现鼠标图片切换。页面简单易懂HTML页面代码如下<!DOCTYPE html><html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="picture.css"/> <title>纯CSS实现图片切换</title
复制链接

扫一扫