悬停时缩放离子图标

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 {&nbsp; &nbsp; -ms-transform: scale(1.5); /* IE 9 */&nbsp; &nbsp; -webkit-transform: scale(1.5); /* Safari 3-8 */&nbsp; &nbsp; transform: scale(1.5);&nbsp;&nbsp; &nbsp; transition: all 300ms ease;&nbsp; &nbsp; -o-transition: all 300ms ease;&nbsp; &nbsp; -ms-transition: all 300ms ease;&nbsp; &nbsp; -moz-transition: all 300ms ease;&nbsp; &nbsp; -webkit-transition: all 300ms ease;&nbsp; }<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&nbsp;class="ion-android-cancel&nbsp;cancel-icon"&nbsp;style="font-size:&nbsp;0.73em;"></i>您可以使用相对数量来重新调整它。