Change mouse events to look at a container for the SVGs, rather than the SVGs themselves.

[nchutchind]

Currently, if you create a rating with the following options:

$("#jRate").jRate({
            width: 80,
            height: 80,
            shapeGap: "10px",
            rating: 4
});

the stars will highlight when you're over the star itself, but when you leave the star and are in the gap in between, it will revert back to the previous selection (in this example: 4).

If a div was placed over the svg so that it covered a rectangular area including (shapeGap / 2) pixels on each side, this wouldn't be a problem. Possibly this could be also fixed by extending the svg with a transparent section into the gap.

[Scott64]

I'm almost 2 years late to the party, but I just had a need for the same thing. I got around it by adding to the "width" property instead of shapeGap. It seemed to evenly distribute the extra space on either side of each SVG image and didn't revert back to the previous selection when moving between the SVGs.