悬停儿童的父母

Posted 2021-04-27

我只想问问是否有任何方法可以仅使用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？

答案

当我将鼠标悬停在按钮上时，如何使箭头旋转？

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