为什么有些动画在悬停在父元素上时不会为某些图标运行？

Question

我创建了这个website。在这个网站上，我有许多带有图标的标签。

此图标的数量为soap-icon，具有动画效果，但icomoon-icon图标的数量尚未动画。当我在控制台中检查时，我发现动画效果已分配给此图标，但当我将鼠标悬停在此图标上时，它会运行另一种效果。

如何解决这个问题？

的CSS：

.search-box-wrapper.style2 .search-box > ul.search-tabs li > a:hover i:before {
    -webkit-animation: toTopFromBottom 0.35s forwards;
    -moz-animation: toTopFromBottom 0.35s forwards;
    animation: toTopFromBottom 0.35s forwards;
}

Answer 1

我查看了您的网页，并将line-height: 1em;和display: inline-block;添加到了没有动画的图标中，一切都开始起作用了。

.icon-insurance:before {
    content: "\e901";
    display: inline-block;
    line-height: 1em;
}

如果你写下动画方法的外观，以及你制作动画的属性，也许会更清楚了吗？

Answer 2

我已将line-height: 1em;和display: inline-block;用于图标，所以现在它可以根据您的需要正常工作，请使用您的风格下面的css。

.icon-insurance:before {
    content: "\e901";
    display: inline-block;
    line-height: 1em;
}
.icon-bus:before {
    content: "\e900";
    display: inline-block;
    line-height: 1em;
}
.icon-train:before {
    content: "\e902";
    display: inline-block;
    line-height: 1em;
}

或者您可以在单个类中使用以下代码：

.search-box-wrapper.style2 .search-box > ul.search-tabs li > a i:before {
    display: inline-block;
    line-height: 1em;
}

Answer 3

看起来您正在将伪类应用于图标容器而不是图标本身，图标位于：before伪元素中。

如果你改变：

[class^="icon-"], [class*=" icon-"]

的

[class^="icon-"], [class*=" icon-"], [class^="icon-"]:before, [class*=" icon-"]:before

所有图标都可以使用。