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

Question

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

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

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

Answer 1

尝试使用：visit而不是：after。

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

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

Answer 2

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

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