css - 悬停在整个跨度上时旋转按钮的一部分

Question

我希望人字形在悬停在整个物体上时旋转，而不仅仅是在我悬停在其自身上时。所以换句话说，当我将鼠标悬停在“关于”这个词上时，我希望人字形也旋转。理想情况下，我希望“关于”在悬停时也变成红色，但这是次要的。感谢您的帮助!

<div class="btn">About
    <i class="fa fa-chevron-up"></i>
</div>

.btn {
    border: none;
    background-color: inherit;
    padding: 14px 28px;
    font-size: 15px;
    cursor: pointer;
    display: inline-block;
}
.btn i {
    padding: 8px;
    font-size: 15px;
    transition: all 0.4s ease;
}

.btn i:hover {
    transform: rotateZ(180deg);
}

Answer 1

你只需要将 :hover 选择器放在 .btn 类上。

看看这个伪选择器也很好 :focus-within https://css-tricks.com/almanac/selectors/f/focus-within/

.btn {
  border: none;
  background-color: inherit;
  padding: 14px 28px;
  font-size: 15px;
  cursor: pointer;
  display: inline-block;  
}

.btn i {
  padding: 8px;
  font-size: 15px;
  transition: all 0.4s ease;
  color: #000;
}

.btn:hover i {
  transform: rotateZ(180deg);
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="btn">About
  <i class="fa fa-chevron-up"></i>
</div>