CSS Onmouseover 旋转子元素

Question

我在下面的代码中，当您将鼠标悬停在 clid 元素上时，它会旋转。我想让 parent 和 child 在悬停时触发旋转。

https://jsfiddle.net/d4sbvmb0/

.parent {
  width: 250px;
  height: 250px;
  background: silver;
  padding: 25px;
}

.child {
  background: red;
  border-radius: 2% 50%;
  height: 100px;
  margin: 100px;
  transition: all 0.5s;
  transition-timing-function: ease-in-out;
  width: 100px;
}

.child:hover {
  transform: rotate(20deg);
}

<div class="parent">
  <div class="child"></div>
</div>

Answer 1

如果您只需要父元素触发子元素的旋转，只需修改包含从 .child:hover 到 .parent:hover .child 的转换的选择器.对于后者，我们说的是，当 .parent 悬停时，选择 .child 并旋转它。

.parent {
  width: 250px;
  height: 250px;
  background: silver;
  padding: 25px;
}

.child {
  background: red;
  border-radius: 2% 50%;
  height: 100px;
  margin: 100px;
  transition: all 0.5s;
  transition-timing-function: ease-in-out;
  width: 100px;
}

.parent:hover .child {
  transform: rotate(20deg);
}

/* Add me if you want additional rotation when both are hovered. */
/*
.parent:hover .child:hover {
  transform: rotate(40deg);
}
*/

<div class="parent">
  <div class="child"></div>
</div>

注意:transition-timing应该是transition-timing-function。