Question

将鼠标悬停在蓝色方框上;蓝色框将旋转170度，但它与父div重叠。我想旋转蓝色框而不重叠父div。

＆＃13;

.box {
  width:250px;
  height:250px;
  background:red;
}
.box_inside {
  position:absolute;
  width:250px;
  height:250px;
  background:blue;
  transition:all 0.7s linear;
}
.box_inside:hover {
  -ms-transform: rotate(170deg);
  -webkit-transform: rotate(170deg);
  transform: rotate(170deg);
}

＆＃13;

<div class="box">
  <div class="box_inside"> </div>
</div>

＆＃13;

Answer 1

如果我理解正确，你会为父母寻找overflow:hidden。您还需要添加position:relative。

＆＃13;

.box {
  width:250px;
  height:250px;
  background:red;
  overflow:hidden;
  position:relative;
}
.box_inside {
  position:absolute;
  width:250px;
  height:250px;
  background:blue;
  transition:all 0.7s linear;
}
.box_inside:hover {
  -ms-transform: rotate(170deg);
  -webkit-transform: rotate(170deg);
  transform: rotate(170deg);
}

＆＃13;

<div class="box">
  <div class="box_inside"> </div>
</div>

＆＃13;

如何控制div内的div？

1 个答案: