关键词：
【中文标题】将 css 悬停在 svg 上【英文标题】：Hover css on svg 【发布时间】：2016-03-25 11:14:22 【问题描述】：我正在尝试使用 svg 制作悬停效果。 This 是我想要达到的效果。当我在两条路径和文本上进行鼠标悬停时，我希望其他路径和文本具有较低的不透明度（我做了这部分），但我也希望出现百分比。当鼠标不在任何东西上时，我希望所有路径和文本的不透明度为 1，并且没有可见的百分比。 我用这段代码来改变路径的不透明度
.tracciati:hover > g
opacity: 0.25;
.tracciati:hover > g:hover
opacity: 1;
这是代码：http://jsfiddle.net/ysrzjs28/
【问题讨论】：
【参考方案1】：我重构了您的 html 以在其各自的图形元素旁边包含百分比元素。这使得使用 CSS 选择要显示的兄弟元素变得更加容易。由于 CSS 中没有父选择器，因此您必须使用 jQuery 或 javascript 才能使用纯 CSS 实现您想要的结果。我添加了一个容器 g 元素并重新分配了你的类。 CSS 看起来像这样
.container:hover > .tracciati
opacity: 0.25;
.container:hover > .tracciati:hover
opacity: 1;
.percentuali
opacity: 0;
.tracciati:hover + .percentuali
opacity: 1;
这是一个有效的小提琴：http://jsfiddle.net/ysrzjs28/2/
【讨论】：
如何将鼠标悬停在 SVG 矩形上？
】如何将鼠标悬停在SVG矩形上？【英文标题】：HowtohoveroveranSVGrect?【发布时间】：2012-03-0118:27:32【问题描述】：在这段SVG中（在FF8、Safari5.1.2、Chrome16中都在Mac上尝试过），当将鼠标移到栏上时，没有一个浏览器能正确检测到每... 查看详情
d3.js - 当鼠标悬停在 SVG 容器上的这些元素上时，如何将光标设置为手？
】d3.js-当鼠标悬停在SVG容器上的这些元素上时，如何将光标设置为手？【英文标题】：d3.js-HowcanIsetthecursortohandwhenmouseovertheseelementsonSVGcontainer?【发布时间】：2016-07-1912:14:51【问题描述】：我使用d3.js在SVG容器上绘制了一些圆圈。... 查看详情
CSS：悬停在 SVG 组区域而不是渲染像素上，指针事件：边界框不能跨浏览器工作。如何解决
】CSS：悬停在SVG组区域而不是渲染像素上，指针事件：边界框不能跨浏览器工作。如何解决【英文标题】：CSS:hoveronSVGgroupareainsteadofrenderedpixels,pointer-events:bounding-boxnotworkingcrossbrowser.Howtoworkaround【发布时间】：2019-02-0721:19:18【问... 查看详情
将鼠标悬停在图像上时如何更改 SVG 的颜色？
】将鼠标悬停在图像上时如何更改SVG的颜色？【英文标题】：HowtochangethecoloroftheSVGwhenhoveringovertheimage?【发布时间】：2021-12-1807:48:27【问题描述】：我有一张图片（带有链接）和中间的YouTube徽标。当我将图片悬停时，我希望YouTube... 查看详情
悬停时更改 SVG 填充和文本突出显示颜色
】悬停时更改SVG填充和文本突出显示颜色【英文标题】：ChangeSVGFillandtexthighlightcoloronhover【发布时间】：2021-10-0413:45:13【问题描述】：我有一个带有SVG图像的导航菜单项。目前，如果我将鼠标悬停在SVG上，它会变为红色，而我的... 查看详情
悬停按钮时如何更改svg颜色
】悬停按钮时如何更改svg颜色【英文标题】：howtochangesvgcolorwhenbuttonishovered【发布时间】：2019-10-1911:18:17【问题描述】：我正在尝试在按钮悬停时更改SVG的颜色。我尝试使用button:hover+svg，但这似乎不起作用。当我运行CSS时，SVG填... 查看详情
SVG悬停矩形改变颜色
】SVG悬停矩形改变颜色【英文标题】：Svghoverrectchangecolor【发布时间】：2015-01-2907:23:27【问题描述】：所以我有这个包含一个小矩形的巨大svg文件。当你将鼠标悬停在它上面时，我希望这个矩形改变颜色。我不能使用java的onmouseov... 查看详情
鼠标悬停时的SVG工具提示？
】鼠标悬停时的SVG工具提示？【英文标题】：SVGtooltiponmousehover?【发布时间】：2015-05-1105:43:09【问题描述】：所以我有一个带有标记位置和多边形的SVG地图。使用CSS，这些区域比地图的其余部分更亮，并且在悬停时它们的颜色不... 查看详情
如何将鼠标悬停在子元素上而不悬停在 CSS 中的父元素上？
】如何将鼠标悬停在子元素上而不悬停在CSS中的父元素上？【英文标题】：HowdoIhoveroverachildelementwithouthoveringovertheparentinCSS?【发布时间】：2017-04-1909:59:51【问题描述】：是否可以将鼠标悬停在嵌套的子元素上而不触发父元素上的... 查看详情
仅在将鼠标悬停在圆圈上时才沿文本路径为 SVG 文本设置动画
】仅在将鼠标悬停在圆圈上时才沿文本路径为SVG文本设置动画【英文标题】：AnimateSVGtextalongatext-pathonlywhenhoveringoveracircle【发布时间】：2018-06-2908:56:11【问题描述】：我想将动画从HTML移动到css。仅当您将鼠标悬停在<circleid=&... 查看详情
使用 CSS 变换在悬停时缩放 SVG 矩形
】使用CSS变换在悬停时缩放SVG矩形【英文标题】：ScalingSVGrectonhoverusingCSStransform【发布时间】：2012-10-2203:19:01【问题描述】：似乎在悬停时对HTML或SVG元素应用相同的CSS变换不会产生相同的效果。正如您在下面的小提琴中看到的那... 查看详情
SVG 多边形的 CSS 鼠标悬停
】SVG多边形的CSS鼠标悬停【英文标题】：CSSmouseoverforSVGpolygons【发布时间】：2013-04-0711:05:38【问题描述】：我正在尝试使用css将鼠标悬停规则分配给svg多边形，但我无法让它工作。这是我的svg：<?xmlversion="1.0"encoding="UTF-8"standalon... 查看详情
在悬停另一个元素时更改 SVG 填充颜色
】在悬停另一个元素时更改SVG填充颜色【英文标题】：ChangeSVGFillColoronhoverofanotherelement【发布时间】：2016-11-2507:58:51【问题描述】：我今天已经研究了很长一段时间，关于如何在悬停时更改svg填充颜色。我已经能够通过使用对象... 查看详情
在 CSS 中悬停时更改 img src SVG [重复]
】在CSS中悬停时更改imgsrcSVG[重复]【英文标题】：ChangeimgsrcSVGonhoverinCSS[duplicate]【发布时间】：2020-12-2012:31:46【问题描述】：html:<imgsrc="logo.svg"alt="Logo"class="logo-img">css:.logo-imgpath:hoverfi 查看详情
CSS：将鼠标悬停在链接上但不显示图像
】CSS：将鼠标悬停在链接上但不显示图像【英文标题】：CSS:Hoveroveralinkbutimageisnotdisplayed【发布时间】：2017-10-0115:31:45【问题描述】：实际上，当我将这些链接悬停时，它们都会变成绿色，因为第一个悬停选择器执行得很好。但... 查看详情
逐渐为 SVG 设置动画
...何解决这个问题。我需要在一个包含两个svgs或imgs的div上悬停动画，没关系。当我将鼠标悬停在该div内时，我如何触发它，这两个imgs将例如移动。也许使用Javascript，但我似乎可以在悬停时瞄准img。只有鼠标悬停？这使得状态永... 查看详情
CSS 过渡属性覆盖 SVG 元素上的 jQuery 动画时间
...从0px到70px增长来制作动画。这个元素也是一个按钮，在悬停时具有漂亮的笔画动画。我的问题是用于描边动画的CSS过渡属性会影响元素出现时增长速度的 查看详情
SVG CSS 悬停样式
】SVGCSS悬停样式【英文标题】：SVGCSSHoverStyling【发布时间】：2017-04-0307:54:17【问题描述】：尝试使用CSS对该多色HTML图像的SVG进行样式化，以使5的右侧在悬停时为白色。bodybackground-color:gray;svgheight:50vh;fill:white;.html5g.st2.st0fill:transpa... 查看详情