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>

Answer 2

您应使用obj.send(:private_method)选择器，而不要使用.btn:hover i：

.btn i:hover

.btn {
  border: 1px solid #333;
  background-color: inherit;
  padding: 14px 28px;
  font-size: 15px;
  cursor: pointer;
  display: inline-block;
}

.btn i {
  border: 1px solid green;
  padding: 8px;
  font-size: 15px;
  transition: all 0.4s ease;
}

.btn i:hover {
  transform: rotateZ(180deg);
}

.btn-2:hover i {
  transform: rotateZ(180deg);
}

此外-按钮元素应使用<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous"> <button class="btn">Does not work <i class="fa fa-chevron-up"></i> </button> <button class="btn btn-2">Works <i class="fa fa-chevron-up"></i> </button>而不是button。

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

2 个答案: