有一个包裹div,里面有各种div,其中一些是绝对位置的。
当我将鼠标悬停在wrap div上时,它将使用transformy:rotate(180度)属性翻转,现在div的背面可见。当wrap div翻转时,我想将所有内部元素的颜色改为黑色。
这是我的问题的代码片段。我想把div的颜色(目前是红色)改成其他颜色,当它们的背面是可见的,但一旦他们在原来的位置,他们再次恢复红色。

body {
  display: flex;
  justify-content: center;
  flex-direction: row;
}
.wrap {
  display: inline-block;
  position: relative;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}
.wrap:hover {
  transform: rotateY(180deg);
}
.div1 {
  display: inline-block;
  width: 50px;
  height: 60px;
  background-color: red;
}

.div1:after {
  position: absolute;
  content: "9";
  top: 2px;
  left: 120px;
  font-size: 50px;
  color: red;
  background: red;
}

.div2 {
  display: inline-block;
  width: 50px;
  height: 60px;
  background-color: red;
}

<div class="wrap">
  <div class="div1"></div>
  <div class="div2"></div>
</div>

最佳答案

想出一个解决办法,希望这就是你想要的

body {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
}

.wrap {
  display: inline-block;
  position: relative;
  -webkit-transition: all 1s ease;
          transition: all 1s ease;
}

.wrap:hover {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.wrap:hover .div1, .wrap:hover .div2, .wrap:hover .div1:after {
  background-color: #333;
}

.div1 {
  display: inline-block;
  width: 50px;
  height: 60px;
  background-color: red;
  -webkit-transition: background .2s ease .3s;
          transition: background .2s ease .3s;
}

.div1:after {
  position: absolute;
  content: "";
  width: 30px;
  height: 60px;
  top: 2px;
  left: 120px;
  font-size: 50px;
  color: red;
  background: red;
  -webkit-transition: all 1s ease;
  transition: background .2s ease .3s;
}

.div2 {
  display: inline-block;
  width: 50px;
  height: 60px;
  background-color: red;
  -webkit-transition: background .2s ease .3s;
          transition: background .2s ease .3s;
}

<div class="wrap">
  <div class="div1"></div>
  <div class="div2"></div>
</div>

07-24 09:37
查看更多