SVG的一部分在悬停时不会改变颜色吗？

Question

I have set up a simple color-change hover for an SVG object, however, the center part of the SVG will not change color on hover, only the outer part of the SVG changes. Any suggestions or clues to get the entire SVG to change color on hover?

I've also set up a CodePen here: http://codepen.io/codebuddy/pen/HlmuE

Thanks in advance for any help!

Answer 1

You could give the polygon arrow element a class ( .inner_arrow ) and then use the following:

Updated Example

.arrow, .arrow-group path,
.inner_arrow {
  transition: all 1s;
}
.arrow:hover .arrow-group path,
.arrow:hover .inner_arrow {
  fill: red;
}