SVG onmouseover / hover doesn't work

Question

I have a SVG image with some rect's that need to change colour when hovering over it. In jsfiddle the code works fine:

But on my web page, I can't get hover or onmouseover to work on the single rects. However when I put a onmouseover on the full img element from within the html code, it does work, so I guess its not a z-index problem on the img element.

I really dont know why I can't target svg elements in my svg or css code.

<style>
    rect:hover
    {
        opacity: 0.5;
    }
</style>


<rect x="277" y="126" fill="#960B2C" width="156" height="88"/>
<rect x="120" y="126" fill="#004D44" width="157" height="88"/>

<rect x="277" y="232" fill="#960B2C" width="156" height="88"/>
<rect x="120" y="232" fill="#004D44" width="157" height="88"/>

<rect x="277" y="339" fill="#960B2C" width="156" height="88"/>
<rect x="120" y="339" fill="#004D44" width="157" height="88"/>

</svg>

Are there errors or warnings in the developer console of your browser? — Alexander, Apr 09 '17 at 10:51
You can only use this kind of thing with inline SVG, you can't use `` and have it respond. The img is rendered statically. — Niet the Dark Absol, Apr 09 '17 at 10:52
Thanks alot Not dark Absol, didnt know you could put it in html. It works now:) — , Apr 09 '17 at 11:17

score 0 · Answer 1 · answered Apr 09 '17 at 11:18

try add attributes for each of rect tag(with javascript)

onmouseover="this.setAttribute('fill-opacity','.5')" 
onmouseout="this.removeAttribute('fill-opacity')"

or with css

<style>
rect:hover{
    fill-opacity:1
}
</style>

SVG onmouseover / hover doesn't work

1 Answers1