How to hover over an SVG rect?
fill: none; pointer-event: all;
should work in most modern browsers, but IE9 and IE10 doesn't support pointer-events
. Besides, you can also set pointer-events: fill
, This fill
value is SVG only, meaning the value of fill
or visibility
doesn't affect pointer events processing.
A workaround for IE9 and IE10 is to set CSS to fill: transparent
if pointer-events
is not supported (you can use Modernizr to detect browser features).
$("#rect").mouseenter(function() {
$(this).css("fill", "teal")
}).mouseout(function(){
$(this).css("fill","transparent")
})
#rect {
fill: transparent;
stroke: blue;
stroke-width: 1px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<svg width=300 height=300>
<rect id="rect" x=0 y=0 width=100 height=100></rect>
</svg>
.bar:hover {
fill: red !important;
}
What's happening is that the mouse events are not detected because the fill is 'none', just add:
.bar {
fill: none;
pointer-events: all;
}
Then it works just fine.
Try giving it a non-transparent fill.
Also, the <style>
needs to go outside the <svg>
.