SVG中的鼠标悬停效果
SVG中的鼠标悬停效果
提问于 2018-05-27 08:37:38
我试图在鼠标悬停时更改SVG形状的颜色。
不起作用。
<style>
a:hover {cursor: pointer}
path:hover {fill: #e51451; opacity: 1}
</style>光标确实变成了“指针”，所以我知道样式标签没问题，但是颜色没有变化。我尝试选择a或g，而不是path，但都不起作用。
顺便说一句，<style>标记在<svg>中。有没有别的选择呢？我能在我的style.css上做这件事吗？SVG作为<object>嵌入到HTML中。我可以从style.css访问和操作它吗？
这是代码。现在:第一个<a>名为"Pricing"，当我悬停时它不会改变。第二个，名为"About"，当我悬停时会变成白色(笔画)。
我已经纠结了一整天了。我看不出这两个元素的代码有什么不同。我遗漏了什么？
既然我们这样做了:为什么这只适用于stroke，而不适用于fill？如果我更改为a:hover path {fill: #ffffff; opacity: 1}，什么也不会发生。
非常感谢您的帮助！
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<style>
a:hover {cursor: pointer}
a:hover path {stroke: #ffffff; opacity: 1}
</style>
<a
xlink:href="index.html#Pricing"
style="fill:#6e5e33;fill-opacity:1"
target="_top"
id="PricingHREF">
<g
pointer-events="all"
transform="matrix(0.05931772,0,0,0.05931772,111.78048,51.466453)"
style="fill:#6e5e33;fill-opacity:1">
<rect
y="54.223179"
x="112.65012"
height="24.7752"
width="27.46353"
id="rect850-8"
style="opacity:0;fill:#6e5e33;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.80872834;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<path
id="path1015"
d="m 255.994,57.339 c -109.543,0 -198.655,89.123 -198.655,198.667 0,109.542 89.111,198.654 198.655,198.654 109.549,0 198.666,-89.111 198.666,-198.654 0,-109.544 -89.117,-198.667 -198.666,-198.667 z m 0,365.985 c -92.259,0 -167.319,-75.059 -167.319,-167.318 0,-92.271 75.06,-167.331 167.319,-167.331 92.271,0 167.33,75.06 167.33,167.331 0,92.259 -75.058,167.318 -167.33,167.318 z"
inkscape:connector-curvature="0"
style="fill:#6e5e33;fill-opacity:1" />
<path
id="path1017"
d="m 277.33,190.101 c 19.613,0 34.643,5.21 51.197,12.254 l 4.287,-34.641 c -15.633,-7.659 -35.871,-11.338 -55.484,-11.338 -46.593,0 -83.073,27.898 -94.104,72.96 H 160.84 l -8.588,24.823 h 27.597 v 4.294 c 0,5.826 0.308,11.65 0.917,16.861 h -28.2 l -9.191,26.367 h 44.134 c 14.715,36.787 48.439,58.848 89.822,58.848 19.613,0 39.852,-3.678 55.484,-11.338 l -4.287,-34.641 c -16.555,7.057 -31.584,12.268 -51.197,12.268 -22.687,0 -38.319,-9.203 -47.522,-25.137 h 56.104 l 9.197,-26.367 h -73.877 c -0.929,-5.211 -1.23,-10.723 -1.23,-16.861 v -4.294 h 71.73 l 9.203,-24.823 h -76.941 c 7.345,-23.917 24.521,-39.235 53.335,-39.235 z"
inkscape:connector-curvature="0"
style="fill:#6e5e33;fill-opacity:1" />
</g>
</a>
<a
xlink:href="index.html#About"
style="fill:#6e5e33;fill-opacity:1"
target="_top"
id="AboutHREF">
<g
transform="translate(-67.420614,-6.3980429)"
pointer-events="all"
style="fill:#6e5e33;fill-opacity:1">
<rect
style="opacity:0;fill:#6e5e33;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.80872834;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect849"
width="27.46353"
height="24.7752"
x="84.07074"
y="52.621223" />
<path
id="path1076"
d="m 98.242846,59.4605 c -1.001433,0 -1.837351,0.349807 -2.506364,0.917981 -0.669013,0.568174 -1.060546,1.02925 -1.173207,2.420129 h 2.042506 c 0.04451,-0.695439 0.210718,-0.856086 0.497935,-1.120353 0.287216,-0.264267 0.643977,-0.429782 1.071672,-0.429782 0.427695,0 0.776111,0.121007 1.045941,0.397096 0.270526,0.275394 0.405441,0.613378 0.405441,1.029251 0,0.415873 -0.130047,0.760811 -0.388055,1.042464 l -1.232319,1.230232 c -0.360237,0.360238 -0.435345,0.649541 -0.542443,0.868604 -0.107097,0.219064 -0.0021,0.552179 -0.0021,1.002129 v 0.848436 h 1.390879 v -0.578606 c 0,-0.449254 0.200982,-0.798365 0.404051,-1.045941 0.07789,-0.08971 0.231581,-0.199591 0.362324,-0.328943 0.129351,-0.130047 0.311556,-0.281653 0.497243,-0.456208 0.18568,-0.17386 0.34772,-0.317816 0.46038,-0.430477 0.11197,-0.111966 0.28096,-0.303907 0.49515,-0.573738 0.37067,-0.449949 0.55983,-1.01256 0.55983,-1.687832 0,-0.979178 -0.31295,-1.740685 -0.94301,-2.2873 C 100.05725,59.733113 99.244279,59.4605 98.242846,59.4605 Z"
inkscape:connector-curvature="0"
style="fill:#6e5e33;fill-opacity:1;stroke-width:0.69543952" />
<path
id="path1078"
d="m 98.11558,68.462965 c -0.354674,0 -0.657885,0.124484 -0.911721,0.371365 -0.25314,0.247576 -0.37971,0.542442 -0.37971,0.88599 0,0.342851 0.129352,0.635631 0.388055,0.877644 0.258704,0.242013 0.565393,0.362324 0.919371,0.362324 0.354675,0 0.658582,-0.123788 0.911722,-0.370669 0.252444,-0.247576 0.37971,-0.543138 0.37971,-0.88599 0,-0.342852 -0.130048,-0.635632 -0.388751,-0.87834 -0.257313,-0.242013 -0.564002,-0.362324 -0.918676,-0.362324 z"
inkscape:connector-curvature="0"
style="fill:#6e5e33;fill-opacity:1;stroke-width:0.69543952" />
<path
id="path1080"
d="m 98.157307,53.062457 c -6.529482,0 -11.822472,5.29299 -11.822472,11.822472 0,6.529481 5.29299,11.822471 11.822472,11.822471 6.529483,0 11.822473,-5.29299 11.822473,-11.822471 0,-6.529482 -5.29299,-11.822472 -11.822473,-11.822472 z m 0,21.558625 c -5.377139,0 -9.736153,-4.359015 -9.736153,-9.736153 0,-5.377139 4.359014,-9.736153 9.736153,-9.736153 5.377133,0 9.736153,4.359014 9.736153,9.736153 0,5.377138 -4.35902,9.736153 -9.736153,9.736153 z"
inkscape:connector-curvature="0"
style="display:inline;fill:#6e5e33;fill-opacity:1;stroke-width:0.69543952" />
</g>
</a>
</svg>回答 1
Stack Overflow用户
发布于 2018-05-27 14:29:39
如果您在path:hover之前添加svg，它应该可以工作
svg path:hover {
cursor: pointer;
fill: #007cb0;
}<a><svg width="100" height="100" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 27.2 32.6" enable-background="new 0 0 27.2 32.6" xml:space="preserve">
<g><path d="M7.9,22.1L4.7,32H0.5L11.2,0.6H16L26.8,32h-4.3l-3.4-9.9H7.9z M18.2,18.9l-3.1-9c-0.7-2-1.2-3.9-1.6-5.7h-0.1 c-0.5,1.9-1,3.8-1.6,5.7l-3.1,9.1H18.2z"/></g>
</svg></a>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50548120
复制相关文章
相似问题