css - 鼠标悬停在 SVG 上无法正常工作

Question

我使用 illustrator 创建了 SVG，现在我使用 CSS 来实现鼠标悬停效果。

当鼠标悬停在子元素上时，鼠标悬停在父元素上停止工作。我不知道为什么会这样？是因为子元素阻止了悬停效果的传播吗？

这是相关的 SVG 组:

<a target="_blank" href="#">
        <g id="Technology">
            <defs>
                <rect id="SVGID_1_" x="191.825" y="377.344" width="37.1" height="33.539"/>
            </defs>
            <clipPath id="SVGID_2_">
                <use xlink:href="#SVGID_1_"  overflow="visible"/>
            </clipPath>

            <path class="pie-chunk" fill="#FFFFFF" d="M280.676 ....."/>
            <path class="small-chunk" fill="#1387C9" d="M136.448,339.175c21.922,58.945,78.01,10...."></path>
            <path class="pie-chunk" clip-path="url(#SVGID_2_)" fill="#FFFFFF" d="M225.97,381.062h-9.865 ..."/>
            <path class="pie-chunk"  clip-path="url(#SVGID_2_)" fill="#FFFFFF" d="M202.123,394.549v4 .... "/>

            <text transform="matrix(1 0 0 1 100.6704 465)" fill="#39A4DC" font-size="16">
           TECHNOLOGY
</text>
        </g>
    </a>

这是 CSS:

    g#Technology:hover text tspan,
    g#Technology:hover text{
        fill: #fff;
    } 
    g#Technology:hover .pie-chunk:hover{
        fill: #5D5D5D;
        opacity: 0.9;
    }
    g#Technology:hover .small-chunk{
        fill: #1E3565;
    }

这是 JSFiddle问题。

生产:

1. 将鼠标悬停在技术白色部分上，它会正常工作。
2. 悬停在文本(子元素)上，会产生悬停效果 变得奇怪。
3. 将鼠标悬停在带有图标的蓝色小部分上，它会再次变得奇怪。

任何人都可以指出我在这里做错了什么吗？

Answer 1

您的问题出在您的 CSS 上。

g#Technology:hover .pie-chunk:hover{
    fill: #5D5D5D;
    opacity: 0.9;
}

您要么悬停在父节点上，要么悬停在子节点上，而不是同时悬停在两者上。删除第二个 :hover，我认为它会按照您的预期运行。

.svg-wrapper {
	    background: #ccc;
	    display: inline-block;
	    margin: 0 auto;
	    top: 50%;
	    left: 50%;
	    position: absolute;
	    transform: translate(-50%, -50%);
	}
	.svg-wrapper text,
	.svg-wrapper tspan{
		font-family: 'Open Sans';
		font-weight: 700;

	}
	.small-chunk,
	.pie-chunk{
		transition: 0.8s;
	}
	
	
	g#Technology:hover text tspan,
	g#Technology:hover text {
		fill: #fff;
	} 
	g#Technology:hover .pie-chunk {
		fill: #5D5D5D;
		opacity: 0.9;
	}

<div class="svg-wrapper">
	<svg id="Layer_1" width="570.049px" height="569.001px" viewBox="0 0 570.049 569.001">
	<a target="_blank" href="http://headsinternational.com/focus/technology">
		<g id="Technology">
			<path class="pie-chunk" fill="#FFFFFF" d="M280.676,528.176l-0.049-46.825l-0.016-17.363l-0.023-21.567c-66.187-1.626-122.278-43.901-144.2-102.843
				l-20.589,6.416l-16.972,5.292l-44.135,13.762l-39.215,12.225c38.068,110.46,142.233,190.113,265.238,191.729L280.676,528.176z"/>
  		<text transform="matrix(1 0 0 1 100.6704 465)" fill="#39A4DC" font-family="'OpenSans-Extrabold'" font-size="16">TECHNOLOGY</text>
		</g>
	</a>

  </svg>
</div>