通过内容属性替换图像集，并在悬停

Question

我正在尝试替换通过内容属性设置的图像，并且应该在悬停时替换图像。

现在通过更换系统默认菜单项来显示我想要替换的图像。这是我替换默认菜单项的代码：

.admin__menu .level-0.item-megamenu > a:before  {
    content: url('../images/list.svg');
    position: relative;
    top:-7px;
    color: #f7f3eb;
}

现在我想在悬停时将此list.svg替换为另一个图像。 我尝试将list.svg替换为部分成功的background-image属性，因为它不能完全取代list.svg。

这是我想在悬停时替换的图像：

请有人帮我解决这个问题。

Answer 1

听起来您需要做的就是在悬停规则下为要触发新图像的父级设置新的content值。我的示例显示用户悬停在.item-megamenu上。您可能会将:hover置于错误的位置？没有在你的代码中看到它。

.admin__menu .level-0.item-megamenu:hover > a:before  { /* Declare hover in selector */
content: url('https://i.stack.imgur.com/xzFyG.png'); /* Link to new image */