Question

我在下面的代码中，当你将鼠标悬停在clid元素上时，它正在旋转。我希望父母和孩子在悬停时触发旋转。

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

Answer 1

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

＆＃13;

.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);
}
*/

＆＃13;

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

＆＃13;

注意： transition-timing应为transition-timing-function。

Answer 2

试试这个

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

CSS Onmouseover旋转子元素

2 个答案: