Apply a style to an element when mouse over another element

Question

I have a SVG that I manipulate using JS :

var allElements = svg.getElementsByTagName("*");
    for (i = 0; i < allElements.length; i++) {
        if (allElements[i].hasAttribute("v:nameU"))
            if (allElements[i].getAttribute("v:nameU") == "idApplication") {
                var appGroup = allElements[i].parentNode.parentNode;
                var appRect = appGroup.getElementsByTagName("rect");
                for (var j = 0; j < appRect.length; j++) {
                        if (appRect[j].hasAttribute("class"))
                            if (appRect[j].getAttribute("class").indexOf("bordered") < 0)
                                appRect[j].setAttribute("class", appRect[j].getAttribute("class") + " bordered");
                            else
                                ;
                        else
                            appRect[j].setAttribute("class", "bordered");
                    }
            }

    }

So this way I add the class "bordered" to all rect that are in a specific g.

Then I have some CSS like this :

.bordered:hover {
  stroke: #4c8b62;
  stroke-width: 2;
  cursor: help;
}

So when my cursor is on the specific rect, the borders are highlighted.

The problem is that inside my rect, I have some text zones etc, and when my mouse is over this text zone (which is displayed inside the rectangle), the rectangle border are not changed. So I want to change the style of those rect when my mouse is on any element of the g I guess, or any other solution is welcomed.

Also, is there a way to give priority to my own class properties, it looks like property of bootstrap class like .stXX are overriding my .bordered properties.

Here is a sample of the svg :

     <g id="group418-1038" transform="translate(1975.93,-1388.94)" v:mID="418" v:groupContext="group">
        <v:custProps>
            <v:cp v:nameU="idApplication" v:lbl="idApplication" v:type="0" v:sortKey="1" v:langID="1036" v:val="VT4(216)"/>
            <v:cp v:nameU="labelFR" v:lbl="labelFR" v:type="0" v:sortKey="3" v:langID="1036"
                    v:val="VT4(Référentiel produits de toutes les entités. &#10;Sera remplacé)"/>
            <v:cp v:nameU="labelEN" v:lbl="labelEN" v:type="0" v:sortKey="4" v:langID="1036"
                    v:val="VT4(Product referential for all entities. Will be replaced in the future)"/>
            <v:cp v:nameU="color" v:lbl="color" v:type="0" v:sortKey="99" v:langID="1036" v:val="VT4()"/>
            <v:cp v:nameU="type" v:lbl="type" v:type="0" v:sortKey="5" v:langID="1036" v:val="VT4(Business)"/>
            <v:cp v:nameU="name" v:lbl="name" v:type="0" v:sortKey="2" v:langID="1036" v:val="VT4(Fund)"/>
            <v:cp v:nameU="External" v:lbl="External" v:type="0" v:langID="1036" v:val="VT4(FALSE)"/>
            <v:cp v:nameU="appLevel" v:lbl="appLevel" v:type="0" v:langID="1036" v:val="VT4(2)"/>
            <v:cp v:nameU="_VisDM_status" v:lbl="status" v:type="2" v:langID="1036" v:val="VT0(1):26"/>
        </v:custProps>
        <v:userDefs>
            <v:ud v:nameU="msvStructureType" v:prompt="" v:val="VT4(Container)"/>
            <v:ud v:nameU="msvSDContainerMargin" v:prompt="" v:val="VT0(0.078740157480315):24"/>
            <v:ud v:nameU="Label" v:prompt="" v:val="VT0(2):26"/>
            <v:ud v:nameU="ShapeVersion" v:prompt="" v:val="VT0(1):26"/>
            <v:ud v:nameU="LightColorText" v:prompt="" v:val="VT0(0):5"/>
            <v:ud v:nameU="TechnicalVue" v:prompt="" v:val="VT0(0):5"/>
            <v:ud v:nameU="MainColor" v:prompt="" v:val="VT4(RGB(213;213;213))"/>
        </v:userDefs>
        <title>Application.51</title>
        <g id="shape419-1039" v:mID="419" v:groupContext="shape">
            <title>Feuille.419</title>
            <v:userDefs>
                <v:ud v:nameU="visVersion" v:val="VT0(14):26"/>
            </v:userDefs>
            <rect x="0" y="1627.09" width="113.386" height="56.6929" class="st56"/>
        </g>
        <g id="shape418-1041" v:mID="418" v:groupContext="groupContent">
            <v:textBlock v:margins="rect(4,4,4,4)" v:tabSpace="42.5197"/>
            <v:textRect cx="56.6929" cy="1655.43" width="113.39" height="56.6929"/>
            <text x="44.24" y="1636.53" class="st4" v:langID="1036"><v:paragraph v:horizAlign="1"/><v:tabList/>Fund<v:newlineChar/><v:newlineChar/><tspan
                        x="10.08" dy="2.4em" class="st55">Référentiel produits de toutes les </tspan><tspan x="22.2" dy="1.2em"
                        class="st55">entités</tspan><tspan
                        class="st55">. <v:newlineChar/></tspan><tspan x="11.11" dy="1.2em" class="st55">Sera remplacé par MyFund </tspan><tspan
                        x="37.16" dy="1.2em" class="st55">dans le future</tspan></text>         </g>
    </g>

Answer 1

Well, I think I managed to make it work by doing as follows :

    // Parsing full SVG file elements
    var allElements = svg.getElementsByTagName("*");
    for (i = 0; i < allElements.length; i++) {
        if (allElements[i].hasAttribute("v:nameU"))
            if (allElements[i].getAttribute("v:nameU") == "idApplication") {
                var appGroup = allElements[i].parentNode.parentNode;
                var appRect = appGroup.getElementsByTagName("rect");
                appGroup.setAttribute("class", "appContainer");
                for (var j = 0; j < appRect.length; j++) {
                        if (appRect[j].hasAttribute("class"))
                            if (appRect[j].getAttribute("class").indexOf("bordered") < 0)
                                appRect[j].setAttribute("class", appRect[j].getAttribute("class") + " bordered");
                            else
                                ;
                        else
                            appRect[j].setAttribute("class", "bordered");
                    }
            }

    }

and for the CSS :

.appContainer:hover .bordered {
stroke: #4c8b62; !important;
stroke-width: 2; !important;
cursor: help; !important;

}

Answer 2

To override bootstraps styles, add !important after your style, like such:

.selector{
   style: value !important;
 }  

Or you can increase the specificity of your selector, like:

.class tag{
   style: value;
}

Which will take precedent over bootstrap's default CSS, assuming it is more specific.

Im having trouble reading your SVG code, but in order for your text zone to trigger a mouseover, I would wrap both elements in a container, and then trigger mousemove on that container element.