0
Я хочу сделать коробку, которая включает в себя 5 ниже. Когда мы оставляем мышь на коробке, коробка распространяется на весь основной div и отображение остальных блоков, установленных на none. в этом коде, просто наведите курсор мыши на ящик1.Multi boxs css hover
Это мои коды.
.multibox{
\t width: 300px;
\t height: 300px;
\t border: 1px solid black;
\t 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;
}<html>
\t <head>
\t \t <meta charset="utf-8">
\t \t <link rel="stylesheet" href="style.css"/>
\t </head>
\t <body>
\t \t <div class="multibox">
\t \t \t <div class="box1">
\t \t \t box 1
\t \t \t </div>
\t \t \t <div class="box2">
\t \t \t box 2
\t \t \t </div>
\t \t \t <div class="box3">
\t \t \t box 3
\t \t \t </div>
\t \t \t <div class="box4">
\t \t \t box 4
\t \t \t </div>
\t \t \t <div class="box5">
\t \t \t box 5
\t \t \t </div>
\t \t </div>
\t </body>
</html>В какой части совершили ошибку?
«коробка является большим, и остальные коробки исчезают. Но это ошибка», какой эффект вы пытаетесь достичь? что ваш код не делает, что он должен? – atmd
вы пытаетесь убрать другие поля, когда вы наведите курсор на один? –
Пожалуйста, перефразируйте свой вопрос, теперь это не имеет смысла. – Rvervuurt