You have to place all of the paths in the same SVG in order to have the hover effects work like you desire. This is due to the SVG elements (not the paths) overlapping each other, which with Z-indexes doesn't work like you want it to
With that being said, you can't position <path>
s very easily, so I used this tool to apply the styles you had. Alternatively you could put them in individual <g>
elements and position them that way
The other thing to note is you should apply the :hover
effects to the paths, not the SVG element
/* SVG */
<svg height="1150" width="257">
<path d="M0 244L257 96L257 393L0 540z" style="fill:lime;stroke:none;"/>
<path d="M0 545L257 397L257 694L0 841z" style="fill:lime;stroke:none;"/>
<path d="M0 846L257 698L257 995L0 1142z" style="fill:lime;stroke:none;"/>
</svg>
/* CSS */
svg {
margin:0 auto;
display:block;
width:257px;
}
svg path {
opacity:.3;
}
svg path:hover {
opacity:1;
}
P.S. I'm assuming the javascripg onmouseover
s and onmouseout
s are from a failed attempt?