Getting lost in logic with .hover and .click while using Raphael.js

Question

I'm trying to have a hover and a click state for a part of a map. Right now I'd just like a color to appear on hover and a different color to appear on click. Ideally, when the user moves their mouse away from the clicked element, the click color will stay on. It seems like the .hover method is overriding this though.

I tried to follow something like Using hover and click with jQuery UI tabs? but the .stop method didn't seem to help my case either.

This is my first time using Raphael so I'm getting a little confused as to where I should be doing jQuery and where I should be using parts of Raphael.

Thanks for taking a look.

fiddle: http://jsfiddle.net/KXw9A/5/

Answer 1

Here's a quick fix: http://jsfiddle.net/KXw9A/7/

I just added a line to your hover functions to only fire if the fill does not match your wardAttrClick.fill value (meaning the element has been clicked).