悬停时缩放离子图标

Question

我添加了一个取消图标，我希望该图标在悬停或单击时放大或放大。我已经添加了transform，但它仍然没有响应。

我该如何解决这个问题？

<i class="ion-android-cancel cancel-icon"></i>

CSS

.cancel-icon:hover {
    -ms-transform: scale(1.5); /* IE 9 */
    -webkit-transform: scale(1.5); /* Safari 3-8 */
    transform: scale(1.5); 
  }

Answer 1

起作用了..。

​

ion-icon:hover {
    -ms-transform: scale(1.5); /* IE 9 */
    -webkit-transform: scale(1.5); /* Safari 3-8 */
    transform: scale(1.5); 
    transition: all 300ms ease;
    -o-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -webkit-transition: all 300ms ease;
  }

<script src="https://unpkg.com/ionicons@5.2.3/dist/ionicons.js"></script>

<ion-icon name="accessibility-outline"></ion-icon>

<ion-icon name="american-football-outline"></ion-icon>

<br>

<ion-icon name="accessibility"></ion-icon>

<ion-icon name="american-football"></ion-icon>

​

Answer 2

因为它是一个图标，你可以使用font-size来调整它的大小。例如：

<i class="ion-android-cancel cancel-icon" style="font-size: 0.73em;"></i>

您可以使用相对数量来重新缩放它。