Jquery 父到子悬停

我只是想问一下，是否有任何方法可以只使用css:hover或者我应该使用jquery来实现这一点？我正在制作一个静态网站，只是为了从后端刷新自己：）

现在我的问题来了

<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工作，或者我应该使用jquery

当我悬停按钮时，如何使箭头旋转

当我悬停按钮时，如何使箭头旋转

---

^同意这个答案。不要忘了考虑用户何时聚焦按钮以实现可访问性：“#着陆按钮：悬停离子图标，#着陆按钮：聚焦离子图标”快乐编码同意这个答案。别忘了考虑用户何时聚焦按钮以实现可访问性：“#着陆按钮：悬停离子图标，#着陆按钮：聚焦离子图标”快乐编码！

     #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;
   }

   ion-icon:hover {
       transform: rotateZ(90deg);
   }

   #landingButton:hover {
       background-color: #e31b6d;
       color: white; 
   }

#landingButton:hover ion-icon {
    transform: rotateZ(90deg);
}