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