SVG中的鼠标悬停效果

时间：2018-05-27 00:37:38

标签： css svg hover mouseover

我正试图在鼠标悬停时更改SVG形状的颜色。

不起作用。

<style>
       a:hover {cursor: pointer}
       path:hover {fill: #e51451; opacity: 1}
</style>

光标确实变为“指针”，所以我知道样式标签很好，但颜色不会改变。我尝试选择path或a，而不是g，而不是<style>。

顺便说一下，<svg>标记位于<object>内。有替代方案吗？我可以从我的style.css做到这一点吗？ SVG作为<a>嵌入在HTML中。我可以从style.css访问和操作它吗？

这是代码。现在：名为“定价”的第一个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> ，则不再发生任何事情。

感谢您的帮助！

print("root: " + str(rootLeaf) + " left:" + str(leftLeaf) + "sum: " +str(rootLeaf+leftLeaf))

1 个答案:

答案 0 :(得分：0)

如果您在svg之前添加path:hover 

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>

相关问题
最新问题