Question

嘿伙计们，我正在进行变换并在重叠的div上测试它们，我无法使下面的div变换

可以在没有任何JS的情况下完成吗？

你可以看到悬停的紫色div变换并消失，我希望它下面的红色div也稍微旋转，我无法使它工作

.container {
  position: relative;
  padding: 2%;
}

.cover {
  position: absolute;
  top: 13px;
  left: 13px;
}
.box1 {
  display: inline-block;
  width: 200px;
  height: 200px;
  background-color: red;
}
.box2 {
  display: inline-block;
  width: 200px;
  height: 200px;
  background-color: purple;
  transition: 2s ease-in-out;
}
.box2:hover {
  transform: rotate(35deg);
  transition: 2s ease-in-out;
  border-radius: 50%;
  opacity: 0;
}

<div class="container">
  <div class="top">
    <div class="box1"></div>
    <div class="box1"></div>
  </div>
  <div class="cover">
    <div class="box2"></div>
    <div class="box2"></div>
  </div>
</div>

Answer 1

基于评论更新，现在使用伪元素而不是加倍标记

.container {
  padding: 2%;
}
.box {
  position: relative;
  display: inline-block;
  width: 150px;
  height: 150px;
}
.box::before,
.box::after {
  content: ' ';
  position: absolute;
  left: 0; top: 0;
  height: 100%;
  width: 100%;
  transition: 2s ease-in-out;
  background-color: purple;
}
.box::before {
  background: url(http://lorempixel.com/200/200/nature/1);
  background-size: cover;
}
.box:hover::before,
.box:hover::after {
  transform: rotate(35deg);
  transition: 2s ease-in-out;
  border-radius: 50%;
  opacity: 0;
}
.box:hover::before {
  opacity: 0.6;
}

<div class="container">
  <div class="top">
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>

Answer 2

这是你可以做的

.container {
  width: 500px;
}
.box {
  display: inline-block;
  position: relative;
}
.box:hover .top,
.box:hover .cover {
  transform: rotate(35deg);
  transition: 2s ease-in-out;
  border-radius: 50%;
  opacity: 0;
}
.top {
  width: 200px;
  height: 200px;
  background-color: red;
}
.cover {
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: purple;
}

<div class="container">
    <div class="box">
      <div class="cover"></div>
      <div class="top"></div>
    </div>
    <div class="box">
      <div class="cover"></div>
      <div class="top"></div>
    </div>
</div>

Answer 3

只是头脑风暴：如何通过将div放入div3中来创建父级，使div3透明，将z-index置于其他位置之上，捕获悬停。选择其他div然后简单地作为div3的孩子：悬停。

对重叠元素应用变换

3 个答案: