通过内容 属性 替换图片集并在悬停时显示另一张图片

Question

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

我要替换的图片现在通过替换系统默认菜单项显示出来了。这是我用来替换默认菜单项的代码：

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

现在我想用悬停时的另一张图片替换这张 list.svg。 我尝试用 background-image 属性 替换 list.svg 部分成功，因为它没有完全替换 list.svg.

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

有人可以帮我解决这个问题吗？

Answer 1

听起来您需要做的就是在悬停规则下为您想要触发新图像的任何 parent 设置一个新的 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 */