通过内容属性替换图像集并在悬停时显示另一个图像答案

【问题标题】：Replace image set through content property and show another image on hover通过内容属性替换图像集并在悬停时显示另一个图像
【发布时间】：2017-08-27 16:17:32
【问题描述】：

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

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

.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。

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

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

【问题讨论】：

标签： css image pseudo-element

【解决方案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 */

【讨论】：