【Web前端】html+css鼠标事件之多个盒子排列让某个盒子显示在最上层

Vinyooo

于 2024-04-14 08:00:00 发布

阅读量294

点赞数 2

文章标签：前端 css html5

本文链接：https://blog.csdn.net/m0_51200160/article/details/137729868

版权

鼠标行为伪类选择器:hover

在css中:hover用于选择鼠标指针浮动在上面的元素

鼠标悬停在图片上，可以把图片放大且显示在最上层

z-index：

z-index用于设置盒子权重，在鼠标悬停前后设置不同的权重

鼠标行为常用伪类选择器：

:link鼠标未点击的状态

:visited鼠标点击后的状态

:hover鼠标悬停时的状态

:active鼠标按下时的状态（按下到放开时的状态，也就是长按）

html代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>2019年夏季</title>
	</head>
	<link rel="stylesheet" type="text/css" href="css/xia2019.css"/>
	<body>
		<div class="box">
			<!--设置44个盒子-->
			<h1>四十四次日落</h1>
			<div class="b1"></div>
			<div class="b2"></div>
			<div class="b3"></div>
			<div class="b4"></div>
			<div class="b5"></div>
			<div class="b6"></div>
			<div class="b7"></div>
			<div class="b8"></div>
			<div class="b9"></div>
			<div class="b10"></div>
			<div class="b11"></div>
			<div class="b12"></div>
			<div class="b13"></div>
			<div class="b14"></div>
			<div class="b15"></div>
			<div class="b16"></div>
			<div class="b17"></div>
			<div class="b18"></div>
			<div class="b19"></div>
			<div class="b20"></div>
			<div class="b21"></div>
			<div class="b22"></div>
			<div class="b29"></div>
			<div class="b30"></div>
			<div class="b31"></div>
			<div class="b23"></div>
			<div class="b24"></div>
			<div class="b25"></div>
			<div class="b26"></div>
			<div class="b27"></div>
			<div class="b28"></div>
			<div class="b32"></div>
			<div class="b33"></div>
			<div class="b34"></div>
			<div class="b35"></div>
			<div class="b36"></div>
			<div class="b37"></div>
			<div class="b38"></div>
			<div class="b39"></div>
			<div class="b40"></div>
			<div class="b41"></div>
			<div class="b42"></div>
			<div class="b43"></div>
			<a href="qiu2019.html"><div class="b44"></div></a>
		</div>
	</body>
</html>

css代码：

*{
	padding: 0;
	margin: 0;
	text-decoration: none;
}
/*底部一层*/
.box{
	width: 100%;
	height: 1206px;
	background-color: antiquewhite;
}
h1{
	color: black;
	text-align: center;
}
.b1,.b2,.b3,.b4,.b5,.b6{
	width: 211.6px;
	height: 211.6px;
	background-color: white;
	display: inline-block;
	margin-left: -5px;
	position: relative;
	top: 10px;
}
.b7,.b8,.b9,.b10,.b11,.b12{
	width: 211.6px;
	height: 211.6px;
	background-color: pink;
	display: inline-block;
	margin-left: -5px;
	margin-top: 5px;
	z-index: 9;
	position: relative;
}
.b13,.b14,.b15,.b16,.b17{
	width: 211.6px;
	height: 211.6px;
	background-color: beige;
	display: inline-block;
	margin-left: -5px;
    float: left;
    margin-top: -105.8px;
    position: relative;
}
.b13{
	margin-left: 105.8px;
}
.b16{
	width: 224.6px;
	height: 211.6px;
}
.b18{
	width: 211.6px;
	height: 211.6px;
	margin-left: 100.8px;
	display: inline-block;
	background-color: honeydew;
	position: relative;
}
.b19,.b20,.b21,.b22{
	width: 211.6px;
	height: 211.6px;
	background-color: plum;
	display: inline-block;
	margin-left: -5px;
	position: relative;
}
.b29{
	width: 211.6px;
	height: 211.6px;
	background-color: plum;
	display: inline-block;
	margin-left: 312px;
	margin-top: -5px;
	position: relative;
}
.b31{
	margin-right: 200px;
}
.b30,.b31{
	width: 211.6px;
	height: 211.6px;
	background-color: plum;
	display: inline-block;
	margin-left: -5px;
	margin-top: -5px;
	position: relative;
}

.b23,.b24,.b25,.b26,.b27,.b28{
	width: 211.6px;
	height: 211.6px;
	background-color: white;
	display: inline-block;
	margin-left: -5px;
	margin-top: -5px;
	position: relative;
}
/*表面一层*/
.b32{
	width: 211.6px;
	height: 211.6px;
	background-color: darkcyan;
	position: absolute;
	top: 150px;
	left: 312.4px;
	z-index: 99;
}
.b33{
	width: 211.6px;
	height: 211.6px;
	background-color: darkcyan;
	position: absolute;
	top: 150px;
	left: 737px;
	z-index: 99;
}
.b34{
	width: 211.6px;
	height: 211.6px;
	background-color: darkcyan;
	position: absolute;
	top: 466.2px;
	left: -5px;
}
.b35{
	width: 211.6px;
	height: 211.6px;
	background-color: darkcyan;
	position: absolute;
	top: 466.2px;
	left: 418px;
}
.b36{
	width: 211.6px;
	height: 211.6px;
	background-color: darkcyan;
	position: absolute;
	top: 466.2px;
	left: 629px;
}
.b37{
	width: 211.6px;
	height: 211.6px;
	background-color: darkcyan;
	position: absolute;
	top: 466.2px;
	left: 1051px;
}
.b38{
	width: 211.6px;
	height: 211.6px;
	background-color: darkcyan;
	position: absolute;
	top: 677px;
	left: -5px;
}
.b39{
	width: 211.6px;
	height: 211.6px;
	background-color: darkcyan;
	position: absolute;
	top: 677px;
	left: 206.6px;
}
.b40{
	width: 211.6px;
	height: 211.6px;
	background-color: darkcyan;
	position: absolute;
	top: 677px;
	left: 840.5px;
}
.b41{
	width: 211.6px;
	height: 211.6px;
	background-color: darkcyan;
	position: absolute;
	top: 677px;
	left: 1051px;
}
.b42{
	width: 211.6px;
	height: 211.6px;
	background-color: darkcyan;
	position: absolute;
	top: 888.6px;
	left: 105.8px;
}
.b43{
	width: 211.6px;
	height: 211.6px;
	background-color: darkcyan;
	position: absolute;
	top: 888.6px;
	left: 523px;
}
.b44{
	width: 211.6px;
	height: 211.6px;
	background-color: darkcyan;
	position: absolute;
	top: 888.6px;
	left: 945px;
}

/*放图片*/
.b1{
	background-image: url(../images/rl1.jpg);
}
.b2{
	background-image: url(../images/rl41.jpg);
}
.b3{
	background-image: url(../images/rl37.jpg);
}
.b4{
	background-image: url(../images/rl4.jpg);
}
.b5{
	background-image: url(../images/rl5.jpg);
}
.b6{
	background-image: url(../images/rl6.jpg);
}
.b7{
	background-image: url(../images/rl8.jpg);
}
.b8{
	background-image: url(../images/rl7.jpg);
}
.b9{
	background-image: url(../images/rl32.jpg);
}
.b10{
	background-image: url(../images/rl10.jpg);
}
.b11{
	background-image: url(../images/rl47.jpg);
}
.b12{
	background-image: url(../images/rl12.jpg);
}
.b13{
	background-image: url(../images/rl13.jpg);
}
.b14{
	background-image: url(../images/rl14.jpg);
}
.b15{
	background-image: url(../images/rl15.jpg);
}
.b16{
	background-image: url(../images/rl36.jpg);
}
.b17{
	background-image: url(../images/rl40.jpg);
}
.b18{
	background-image: url(../images/rl9.jpg);
}
.b19{
	background-image: url(../images/rl22.jpg);
}
.b20{
	background-image: url(../images/rl20.jpg);
}
.b21{
	background-image: url(../images/rl21.jpg);
}
.b22{
	background-image: url(../images/rl34.jpg);
}
.b23{
	background-image: url(../images/rl40.jpg);
}
.b24{
	background-image: url(../images/rl24.jpg);
}
.b25{
	background-image: url(../images/rl23.jpg);
}
.b26{
	background-image: url(../images/rl27.jpg);
}
.b27{
	background-image: url(../images/rl42.jpg);
}
.b28{
	background-image: url(../images/rl28.jpg);
}
.b29{
	background-image: url(../images/rl29.jpg);
}
.b30{
	background-image: url(../images/rl30.jpg);
}
.b31{
	background-image: url(../images/rl31.jpg);
}
.b32{
	background-image: url(../images/rl48.jpg);
}
.b33{
	background-image: url(../images/rl33.jpg);
}
.b34{
	background-image: url(../images/rl19.jpg);
}
.b35{
	background-image: url(../images/rl35.jpg);
}
.b36{
	background-image: url(../images/rl16.jpg);
}
.b37{
	background-image: url(../images/rl38.jpg);
}
.b38{
	background-image: url(../images/rl39.jpg);
}
.b39{
	background-image: url(../images/rl49.jpg);
}
.b40{
	background-image: url(../images/rl17.jpg);
}
.b41{
	background-image: url(../images/rl46.jpg);
}
.b42{
	background-image: url(../images/rl26.jpg);
}
.b43{
	background-image: url(../images/rl43.jpg);
}
.b44{
	background-image: url(../images/rl44.jpg);
}
/*鼠标悬停图片放大*/
.b1:hover,.b2:hover,.b3:hover,.b4:hover,.b5:hover,.b6:hover,.b7:hover,.b8:hover,.b9:hover,.b10:hover,
.b11:hover,.b12:hover,.b13:hover,.b14:hover,.b15:hover,.b16:hover,.b17:hover,.b18:hover,.b19:hover,.b20:hover,
.b21:hover,.b22:hover,.b23:hover,.b24:hover,.b25:hover,.b26:hover,.b27:hover,.b28:hover,.b29:hover,.b30:hover,
.b31:hover,.b32:hover,.b33:hover,.b34:hover,.b35:hover,.b36:hover,.b37:hover,.b38:hover,.b39:hover,.b40:hover,
.b41:hover,.b42:hover,.b43:hover,.b44:hover{
	transform: scale(1.2);
	z-index: 999;
	transition: 0.5s
}

Vinyooo

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【Web前端】html+css鼠标事件之多个盒子排列让某个盒子显示在最上层

active鼠标按下时的状态（按下到放开时的状态，也就是长按）z-index用于设置盒子权重，在鼠标悬停前后设置不同的权重。在css中:hover用于选择鼠标指针浮动在上面的元素。鼠标悬停在图片上，可以把图片放大且显示在最上层。:visited鼠标点击后的状态。:hover鼠标悬停时的状态。:link鼠标未点击的状态。
复制链接

扫一扫