咨询：仅用CSS:hover实现按钮hover时子元素箭头旋转是否可行？

Absolutely no need for jQuery here—you can fix this entirely with CSS! The issue lies in how you're targeting the hover state right now.

Right now, your ion-icon:hover selector only triggers the rotation when the mouse is directly over the icon itself. To get the icon to rotate when hovering the entire button, you need to tie the hover state to the button element, then target its child icon.

Fix Steps: #

1. Replace your existing ion-icon:hover rule with a selector that targets the icon only when the parent button is hovered.
2. Keep your existing button hover styles for the color/background change—those will work alongside the new icon rotation rule.

Modified Full Code: #

HTML (unchanged):

<button class="btn" id="landingButton"> 
  <div class="row row-for-button"> 
    <div class="col-10"> 
      <strong>View my work</strong> 
    </div> 
    <div class="col-2" id="arrow-right"> 
      <ion-icon name="arrow-round-forward"></ion-icon> 
    </div> 
  </div> 
</button>

CSS (updated selector):

#landingButton { 
  font-family: 'Comfortaa', cursive; 
  border: solid 2px #e31b6d; 
  color: #e31b6d; 
  padding: 8px 20px; 
  margin-bottom: 10px; 
}
#arrow-right { 
  padding-left: 0px !important; 
  padding-top: 2px !important; 
}
ion-icon { 
  transition: all 0.4s ease; 
}
/* This is the key change: target icon when button is hovered */
#landingButton:hover ion-icon { 
  transform: rotateZ(90deg); 
}
#landingButton:hover { 
  background-color: #e31b6d; 
  color: white; 
}

How This Works: #

The selector #landingButton:hover ion-icon uses CSS's descendant combinator to apply styles to any ion-icon inside the button only when the button is in a hover state. This way, hovering anywhere on the button will trigger both the button's color shift and the icon's rotation simultaneously.

内容的提问来源于stack exchange，提问作者chrannbon