Merging boundary colours of 2 Map Levels - css

Question

when I merge boundary colours of 2 Map Levels (Department and Arrondissment) , the mouse hover done wrong for 2nd Layer (Arrondissment)
My Bug on Arrondissment Layer is like this
Hovering should be done like
For merging the Border color , I Applied the following logic on Arrondissment Tab :
1.Draw Arrondissment coordinates drawn
2.Draw Department coordinates after them (like superimpose)
Make the Department Transparent (reduce the opacity)
this procedure mix the border well, but the Hover on does still as per Department level .
this is svg vector Map and Each map piece is made up of coordinates
Code is complex and lengthy for Creation of Map , thats why I dont think can post all of it
this is the Main function which creates Bundary and add color to each piece Map
//path
for (var obj in mapObj.paths) {
var rObj = R.path(pathData[mapObj.paths[obj].path]).attr(attr);
//if url found the assign
if(mapObj.paths[obj].url !=null){
//rObj.attr({"href":mapObj.paths[obj].url});
if(mapObj.paths[obj].url.indexOf("alert") > 0){
rObj.attr({"href":mapObj.paths[obj].url});
}
else{
rObj.dblclick(function(e){
loadMap(this.data("qStr"));
});
rObj.click(function(e){
showPopup(this,currX,currY);
loadExternalData();
});
}
}
else{
rObj.click(function(e){
showPopup(this,currX,currY);
});
}
rObj.data("qStr", mapObj.paths[obj].url);
rObj.data("key", mapObj.paths[obj].key);
rObj.data("mType", mapObj.paths[obj].mType);
rObj.data("type", mapObj.paths[obj].type);
rObj.data("sTitle", mapObj.paths[obj].title);
rObj.data("name", mapObj.name);
rObj.data("showhide", "show");
rObj.data("zoom", mapObj.zoom);
rObj.data("parentId", mapObj.parentId);
rObj.data("title", mapObj.title);
rObj.color = Raphael.getColor();
rObj.data("hoverFill", "#3e5f43");
rObj.data("fill", "#fff");
rObj.data("childId", mapObj.paths[obj].key);
if(mapObj.paths[obj].cName=="city"){
rObj.data("className",mapObj.paths[obj].cName);
rObj[0].setAttribute('class', mapObj.paths[obj].cName);
}
else
{
rObj.data("className", mapObj.cName == "" ? mapObj.paths[obj].cName : mapObj.cName);
rObj[0].setAttribute('class', mapObj.cName == "" ? mapObj.paths[obj].cName : mapObj.cName);
}
rObj.hover(animateOver, animateOut);
rObj[0].id = mapObj.paths[obj].key;
rObj[0].style.cursor = "pointer";
rObj[0].setAttribute('title', mapObj.cName);
rObj[0].setAttribute('data-toggle', "tooltip");
rObj[0].setAttribute('data-placement', "left");
if (mapObj.zoom == 1) {
var box = rObj.getBBox();
var currPaperPosition = panZoom.getCurrentPosition();
var currPaperZoom = panZoom.getCurrentZoom();
var currHeight = R.height * (1 - currPaperZoom * 0.1);
rObj.animate({
transform: "t" + xdif + "," + ydif + "s" + mapZoom
}, 100);
}
}
}
I Just need to place hover property of lower layer on upper layer .Can this thing be done by Css and any other technique ?

Answer 1

In google maps or in the component you use for managing event check if the z-index of the Department is more high of that related to Arrondissment .. otherwise the mouse hover event in managed form the wrong polygon .. if you need you can change dinamically by setOption or a similar based on your need ..
yourPolygonObj.setOptions({ zIndex: 200 });