悬停时缩放离子图标

Question

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

我该如何解决这个问题？

<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>

您可以使用相对数量来重新调整它。