CSS旋转旋转子元素

Question

i在以下代码中具有，当您鼠标在clid元素上时，它在旋转。我希望父母和孩子在悬停时触发旋转。

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。

Answer 2

尝试此

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