Question

我想制作一个包装盒，包括下面的5个。将鼠标放在盒子上时，盒子会延伸到整个主div，其余部分的显示设置为无。在这段代码中，只有box1的鼠标悬停很好。

这些是我的代码。

＆＃13;

.multibox{
	width: 300px;
	height: 300px;
	border: 1px solid black;
	overflow: hidden;
}
.multibox div{
  position: absolute;
  transition:  width 0.5s, height 0.5s, -webkit-transform 0.5s;
  -moz-transition:  width 0.5s, height 0.5s, -webkit-transform 0.5s; /* Firefox 4 */
  -webkit-transition:  width 0.5s, height 0.5s, -webkit-transform 0.5s; /* Safari and Chrome */
  -o-transition:  width 0.5s, height 0.5s, -webkit-transform 0.5s; /* Opera */
  -ms-transition:  width 0.5s, height 0.5s, -webkit-transform 0.5s; /* IE9 (maybe) */
}

.box1{
  background: gray;
  width: 250px;
  height: 50px;
  float: right;
  display: block;
  position: initial !important;
}
.box1:hover{
  width: 300px;
  height: 300px;
}

.box2{
  background: blue;
  width: 50px;
  height: 250px;
  float: left;
  display: block;
  position: initial !important;  
}
.box2:hover{
  width: 300px;
  height: 300px;
}

.box3{
  background: red;
  width: 50px;
  height: 250px;
  display: block;
  float: right;
  position: initial !important;  
}
.box3:hover{
  width: 300px;
  height: 300px;
}

.box4{
  background: green;
  width: 200px;
  height: 200px;
  display: block;
  float: right;
  position: initial !important;  
}
.box4:hover{
  width: 300px;
  height: 300px;
}

.box5
{
  background: brown;
  width: 250px;
  height: 50px;
  display: block;
  float: left;
  position: initial !important;
}
.box5:hover{
  width:300px;
  height: 300px;
  
}

＆＃13;

<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="style.css"/>
	</head>
	<body>
		<div class="multibox">
			<div class="box1">
			   box 1
			</div>
			<div class="box2">
			   box 2
			</div>
			<div class="box3">
			   box 3
			</div>
			<div class="box4">
			   box 4
			</div>
			<div class="box5">
			   box 5
			</div>
		</div>
	</body>
</html>

＆＃13;

哪一方犯了错误？

Answer 1

制作所有框position:absolute并妥善放置。</ p>

＆＃13;

.multibox{
width: 300px;
height: 300px;
border: 1px solid black;
overflow: hidden;
position: relative;
}
.multibox div{
  position: absolute;
  transition:  all 0.5s, height 0.5s, -webkit-transform 0.5s;
  -moz-transition:  all 0.5s, height 0.5s, -webkit-transform 0.5s; /* Firefox 4 */
  -webkit-transition:  all 0.5s, height 0.5s, -webkit-transform 0.5s; /* Safari and Chrome */
  -o-transition:  all 0.5s, height 0.5s, -webkit-transform 0.5s; /* Opera */
  -ms-transition:  all 0.5s, height 0.5s, -webkit-transform 0.5s; /* IE9 (maybe) */
}

.multibox div:hover{
z-index: 99;
}
.box1{
  background: gray;
  width: 250px;
  height: 50px;
  right: 0;
top: 0;
  display: block;
}
.box1:hover{
  width: 300px;
  height: 300px;
}

.box2{
  background: blue;
  width: 50px;
  height: 250px;
  float: left;
  display: block; 
}
.box2:hover{
  width: 300px;
  height: 300px;
}

.box3{
  background: red;
  width: 50px;
  height: 250px;
  display: block;
  right: 0;
top: 50px;
}
.box3:hover{
  width: 300px;
  height: 300px;
top: 0;
}

.box4{
  background: green;
  width: 200px;
  height: 200px;
  display: block;
  left: 50px;
top: 50px; 
}
.box4:hover{
  width: 300px;
  height: 300px;
left: 0;
top: 0;
}

.box5
{
  background: brown;
  width: 250px;
  height: 50px;
  display: block;
  left: 0;
bottom: 0;
}
.box5:hover{
  width:300px;
  height: 300px;
  
}

＆＃13;

<div class="multibox">
		<div class="box1">
		   box 1
		</div>
		<div class="box2">
		   box 2
		</div>
		<div class="box3">
		   box 3
		</div>
		<div class="box4">
		   box 4
		</div>
		<div class="box5">
		   box 5
		</div>
	</div>

＆＃13;

多箱css悬停

1 个答案: