使用 CSS 在导航栏中悬停时更改 SVG 图像答案

【问题标题】：Change SVG image on hover in nav bar with CSS使用 CSS 在导航栏中悬停时更改 SVG 图像
【发布时间】：2015-02-10 01:46:35
【问题描述】：

当从导航栏中选择页面时，我正在使用以下 CSS 更改 SVG 图像。

如何在悬停时将其更改回原始图像？

.left_nav > li.opened_menu > a.about-us:after {background-image: url("data:image/svg+xml;base64, SVG ENCODING CODE");}

【问题讨论】：

【解决方案1】：

通过将 :hover:after 添加到最后一个子元素，它会更改悬停时的 SVG 图像。

.left_nav > li.opened_menu > a.about-us:hover:after {background-image: url("data:image/svg+xml;base64,SVG ENCODING CODE");}

【讨论】：

【解决方案2】：

尝试使用 :visited 而不是 :after。

 .left_nav > li.opened_menu > a.about-us:visited { background-image: url("data:image/svg+xml; base64, SVG ENCODING CODE");}

::after 伪元素可用于在元素内容之后插入一些内容。 -W3schools
我不认为这是你想要的。

【讨论】：