我有一个 SVG 标签，我想在它悬停时更改填充颜色。 我在 SVG 标签内添加了样式标签，但似乎hover不起作用，而简单的样式就可以了。 这是我的 SVG 标签：
<svg width="28" height="81" viewBox="0 0 28 81" xmlns="http://www.w3.org/2000/svg">
<style type="text/css">
.slick_next_arrow {
fill:red;
}
.slick_next_arrow:hover {
fill:green;
}
</style>
<path class="slick_next_arrow" hover="fill:green" fill-rule="evenodd" clip-rule="evenodd" d="M3.73141 1.20959C2.95311 -0.00927037 1.3341 -0.366415 0.115239 0.411883L25.5894 40.3058L0 80.3802C1.21886 81.1585 2.83787 80.8014 3.61617 79.5825L27.4729 42.2216C27.7642 41.7653 27.8965 41.2531 27.884 40.7498C28.1017 40.0409 28.0185 39.2445 27.5881 38.5705L3.73141 1.20959Z"/>
</svg>
我已将此 svg 包含到元素::之后两种方式：
将整个标签添加到内容中
#slick-views-customer-quotes-carousel-block-main-1 .slick__arrow .slick-next::after {
content : url('data:image/svg+xml; utf8, <svg class="" width="28" height="81" viewBox="0 0 28 81" xmlns="http://www.w3.org/2000/svg"> <style type="text/css"> .slick_next_arrow { fill:blue; } .slick_next_arrow:hover { fill:green; } </style> <path class="slick_next_arrow" hover="fill:green" fill-rule="evenodd" clip-rule="evenodd" d="M3.73141 1.20959C2.95311 -0.00927037 1.3341 -0.366415 0.115239 0.411883L25.5894 40.3058L0 80.3802C1.21886 81.1585 2.83787 80.8014 3.61617 79.5825L27.4729 42.2216C27.7642 41.7653 27.8965 41.2531 27.884 40.7498C28.1017 40.0409 28.0185 39.2445 27.5881 38.5705L3.73141 1.20959Z"/></svg>');
}
作为单独的 SVG 文件
#slick-views-customer-quotes-carousel-block-main-1 .slick__arrow .slick-next::after {
content : url("../images/right_arrow.svg");
}
但它们都不起作用。 关于如何解决这个问题有什么想法吗？
当你将其设置为伪元素的内容时，你的 svg 实际上是一个CSS https://developer.mozilla.org/en-US/docs/Web/CSS/image。 CSS 代表 svg：
这意味着任何:hover这个 svg 文档中的样式将毫无用处。
然而你可以做的是设置这个:hover在父母身上.slick-next元素并更改content there.
避免在服务器上仅存储两个 svg 文件fill这将会改变，你可以使用由莉亚·维罗 https://gist.github.com/LeaVerou/5198257，它利用了:target伪类。有关此的更多信息，请点击此处 https://stackoverflow.com/questions/46045185/style-svg-loaded-to-html-as-content-tag-with-css/46045448#46045448.
你必须重组你的 svg，以便你拥有不可见的触发元素[id]属性，因此它们可以成为:target。然后所有逻辑都是使用 CSS 选择器完成的：
右箭头.svg
<svg width="28" height="81" viewBox="0 0 28 81" xmlns="http://www.w3.org/2000/svg">
<style>
.slick_next_arrow {
fill:red;
}
/* when loaded from 'right_arrow.svg#hover' */
#hover:target ~ .slick_next_arrow {
fill:green;
}
</style>
<!-- here is our triggerer -->
<g id="hover"></g>
<!-- the visual content -->
<path class="slick_next_arrow" hover="fill:green" fill-rule="evenodd" clip-rule="evenodd" d="M3.73141 1.20959C2.95311 -0.00927037 1.3341 -0.366415 0.115239 0.411883L25.5894 40.3058L0 80.3802C1.21886 81.1585 2.83787 80.8014 3.61617 79.5825L27.4729 42.2216C27.7642 41.7653 27.8965 41.2531 27.884 40.7498C28.1017 40.0409 28.0185 39.2445 27.5881 38.5705L3.73141 1.20959Z"/>
</svg>
还有你的CSS：
.slick__arrow .slick-next::after {
content : url('right_arrow.svg');
}
.slick__arrow .slick-next:hover::after {
content : url('right_arrow.svg#hover');
}
这是一个更复杂的实时片段，因为我们必须解决无法托管来自 StackSnippets 的第三方文件的事实。
const svg_content = `<svg width="28" height="81" viewBox="0 0 28 81" xmlns="http://www.w3.org/2000/svg">
<style>
.slick_next_arrow {
fill:red;
}
#hover:target ~ .slick_next_arrow {
fill:green;
}
/* some goodies */
circle {
display: none;
}
/* hide previous path */
[id^="show_circle"]:target ~ .slick_next_arrow {
display: none;
}
/* show new one */
[id^="show_circle"]:target ~ circle {
display: block;
fill: red;
}
#show_circle_hover:target ~ circle.change-color {
fill: green;
}
</style>
<!-- here are all our triggerers -->
<g id="hover"></g>
<g id="show_circle"></g>
<g id="show_circle_hover"></g>
<path class="slick_next_arrow" hover="fill:green" fill-rule="evenodd" clip-rule="evenodd" d="M3.73141 1.20959C2.95311 -0.00927037 1.3341 -0.366415 0.115239 0.411883L25.5894 40.3058L0 80.3802C1.21886 81.1585 2.83787 80.8014 3.61617 79.5825L27.4729 42.2216C27.7642 41.7653 27.8965 41.2531 27.884 40.7498C28.1017 40.0409 28.0185 39.2445 27.5881 38.5705L3.73141 1.20959Z"/>
<circle cx="14" cy="15" r="12"/>
<circle cx="14" cy="40" r="12" class="change-color"/>
<circle cx="14" cy="65" r="12"/>
</svg>`;
// StackSnippets force us to make a complex js-powered live demo...
// but in production all is done from CSS
const url = URL.createObjectURL( new Blob( [ svg_content ], { type: "image/svg+xml" } ) );
const el = document.querySelector( '.parent' );
el.style.setProperty( '--url', 'url(' + url + ')' );
el.style.setProperty( '--url-hovered', 'url(' + url + '#hover)' );
el.style.setProperty( '--url-circle', 'url(' + url + '#show_circle)' );
el.style.setProperty( '--url-circle-hovered', 'url(' + url + '#show_circle_hover)' );.parent{
display: inline-block;
width: 28px;
height: 90px;
}
.parent::before {
/* right_arrow.svg */
content: var(--url);
}
.parent:hover::before {
/* right_arrow.svg#hover */
content: var(--url-hovered);
}
/* goodies */
:checked ~ .parent::before {
/* right_arrow.svg#show_circle */
content: var(--url-circle);
}
:checked ~ .parent:hover::before {
/* right_arrow.svg#show_circle_hover */
content: var(--url-circle-hovered);
}<input type="checkbox" id="check"><label for="check">change shape</label><br>
<div class="parent"></div>但您可以在此 plnkr 中访问简单版本。 https://plnkr.co/edit/vPQKF9QtA9oZoZrMOpBH?p=preview