Применить стиль к элементу при наведении на другой элемент

Question

У меня есть SVG, что я манипулируют с помощью 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"); 
        } 
      } 

    } 

Так вот, как я добавить класс "bordered" всем rect, которые находятся в определенном g.

Тогда у меня есть некоторые CSS, как это:

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

Так что, когда мой курсор находится на определенном прямоугольнике, границы подсвечиваются.

Проблема в том, что внутри моего прямоугольника у меня есть текстовые зоны и т. Д., И когда моя мышь находится над этой текстовой зоной (которая отображается внутри прямоугольника), граница прямоугольника не изменяется. Так что я хочу изменить стиль этих прямоугольников, когда моя мышь находится на любом элементе g. Я думаю, или любое другое решение приветствуется.

Кроме того, есть ли способ отдать приоритет моим собственным свойствам класса, похоже, что свойство класса начальной загрузки, например .stXX, переопределяет мои свойства .bordered.

Вот образец 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>