父子悬停

Question

我只是想问一下是否有任何方法可以只使用 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 代码

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

有什么办法可以让它使用 css 工作，或者我应该使用 jquery？

Answer 1

悬停按钮时如何使箭头旋转？

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