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。

生产：

将鼠标悬停在技术白色部分上，它会正常工作。
将鼠标悬停在文字（子元素）上，会产生悬停效果很奇怪。
将鼠标悬停在带有图标的蓝色小部分上，它会再次变得怪异。

有谁能请指出我在这里做错了什么？

Answer 1

您的问题与您的CSS有关。

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

您要么将父母或孩子盘旋，要么两者都不是。删除第二个:hover，我认为它会表现出您的期望。

＆＃13;

.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;
	}

＆＃13;

<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>

＆＃13;

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

1 个答案: