css - 关于:first-of-type:before:hover的问题

Question

所以我在玩弄某人的代码笔，想在代码中添加一些来自 fontawesome 的箭头。

我能够使用以下代码添加箭头:

.button:first-of-type:before {
 content: "\f100";
 font-family: fontAwesome;
 color: #000;
 font-size: 1em;
 z-index: 10;
 margin: 20px 0 0 -75px;
 position: absolute;
}

这行得通，但是当有人将鼠标悬停在按钮上时，我希望之前的 css 不显示。

我已经尝试了以下但它不起作用:

.button:before:hover:first-of-type {
 display: none;
}

和

.button:first-of-type:before:hover {
display: none;
}

和

.button:first-of-type:hover:before {
display: none;
}

我也尝试添加 !important 但没有任何效果。

这是代码笔的链接:http://codepen.io/bskousen/pen/tgJdH

Answer 1

你的解决方案可能是

.button:hover::before{
    content: "";
}

因此，与其隐藏 :before，不如将其删除。

还有一件事，看起来当您将鼠标悬停在左箭头上时，上方的按钮会激活，您可能想要检查您的代码。