javascript - SVG Select color map -

i'm working in game in js. it's war game. if hover on country/select gives border , color want, if own country has own color. can see if select country , click on "selecteren" on left. select country other usa, brazil, russia, china, canada , india. had green border want country colered. http://w0w.eu

html code of country:

<g data-name="indonesia"> <path id="kalimantan" d="m781.68,324.4l-2.31,8.68l-12.53,4.23l-3.75-4.4l-1.82,0.5l3.4,13.12l5.09,0.57l6.79,2.57v2.57l3.11-0.57l4.53-6.27v-5.13l2.55-5.13l2.83,0.57l-3.4-7.13l-0.52-4.59l781.68,324.4l781.68,324.4z"/> <path id="sumatra" d="m722.48,317.57l-0.28,2.28l6.79,11.41h1.98l14.15,23.67l5.66,0.57l2.83-8.27l-4.53-2.85l-0.85-4.56l722.48,317.57l722.48,317.57z"/> <path id="java" d="m753.17,358.32l-2.75,1.88l0.59,1.58l8.75,1.98l4.42,0.79l1.87,1.98l5.01,0.4l2.36,1.98l2.16-0.5l1.97-1.78l-3.64-1.68l-3.14-2.67l-8.16-1.98l753.17,358.32l753.17,358.32z"/> <path id="bali" d="m781.77,366.93l-2.16,1.19l1.28,1.39l3.14-1.19l781.77,366.93l781.77,366.93z"/> <path id="lombok" d="m785.5,366.04l0.39,1.88l2.26,0.59l0.88-1.09l-0.98-1.49l785.5,366.04l785.5,366.04z"/> <path id="sumba" d="m790.91,370.99l-2.75,0.4l2.46,2.08h1.96l790.91,370.99l790.91,370.99z"/> <path id="flores" d="m791.69,367.72l-0.59,1.19l4.42,0.69l3.44-1.98l-1.96-0.59l-3.14,0.89l-1.18-0.99l791.69,367.72l791.69,367.72z"/> <path id="timor" d="m806.14,368.42l-5.11,4.26l0.49,1.09l2.16-0.4l2.55-2.38l5.01-0.69l-0.98-1.68l806.14,368.42l806.14,368.42z"/> <path id="sulawesi" d="m789.53,349.11l2.26,2.77l-1.47,4.16v0.79h3.34l1.18-10.4l1.08,0.3l1.96,9.5l1.87,0.5l1.77-4.06l-1.77-6.14l-1.47-2.67l4.62-3.37l-1.08-1.49l-4.42,2.87h-1.18l-2.16-3.17l0.69-1.39l3.64-1.78l5.5,1.68l1.67-0.1l4.13-3.86l-1.67-1.68l-3.83,2.97h-2.46l-3.73-1.78l-2.65,0.1l-2.95,4.75l-1.87,8.22l789.53,349.11l789.53,349.11z"/> <path id="maluku" d="m814.19,330.5l-1.87,4.55l2.95,3.86h0.98l1.28-2.57l0.69-0.89l-1.28-1.39l-1.87-0.69l814.19,330.5l814.19,330.5z"/> <path id="seram" d="m819.99,345.45l-4.03,0.89l-1.18,1.29l0.98,1.68l2.65-0.99l1.67-0.99l2.46,1.98l1.08-0.89l-1.96-2.38l819.99,345.45l819.99,345.45z"/> <path id="west papua" d="m831.93,339.34l-4.17,0.47l-2.68,1.96l1.11,2.24l4.54,0.84v0.84l-2.87,2.33l1.39,4.85l1.39,0.09l1.2-4.76h2.22l0.93,4.66l10.83,8.96l0.28,7l3.7,4.01l1.67-0.09l0.37-24.72l-6.29-4.38l-5.93,4.01l-2.13,1.31l-3.52-2.24l-0.09-7.09l831.93,339.34l831.93,339.34z"/> 

css code:

path:hover{ fill: #e2e2e2!important; stroke-width: 1px; stroke: #2b2b2b; }  g.selected{ stroke-width: 1px; stroke: #2b2b2b; fill: #d2d2d2!important; } path[data-owned=true]{ fill: #d2d2d2!important; stroke-width: 1px; stroke: #3fda4e;  } g[data-owned=true]{  fill: #d2d2d2!important; stroke-width: 1px; stroke: #3fda4e; 

}

this.addcountry     =   function(country){     if(this.countries.indexof(country) >= 0){         alert("you own country");         return false;     }     this.countries.push(country);     $("g[data-name='"+country+"']").first().attr("data-owned", "true"); } 

in javascript @ time mark country "owned", if set path's fill should stop obeying :hover selector, eg:

obj.style.fill = "#d2d2d2"; 

example: http://iqgames.gjsite.com/ , after country colored green or red no longer has hover color.

update: pretty sure because of !important in css. if add path:hover selector in page referenced above, has same behaviour yours.

to clarify, try:

1. rethink logic of css rules avoid using !important on using javascript modify.
2. in script when assign country "owned", in addition changing classes , data attributes, modify fill/stroke directly using document.getelementbyid.

also: aware jquery not support svg.