javascript - 当鼠标悬停在另一个元素上时将样式应用于元素

Question

我有一个使用 JS 操作的 SVG :

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" 添加到特定 g 中的所有 rect。

然后我有一些像这样的 CSS:

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

因此，当我的光标位于特定矩形上时，边框会突出显示。

问题是在我的矩形内部，我有一些文本区域等，当我的鼠标悬停在这个文本区域(显示在矩形内部)上时，矩形边框没有改变。因此，我想当我的鼠标位于 g 的任何元素上时，我想更改那些 rect 的样式，我想，或者欢迎任何其他解决方案。

此外，有没有办法优先考虑我自己的类属性，看起来像 .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>

Answer 1

要覆盖 Bootstrap 样式，请在您的样式之后添加 !important，如下所示:

.selector{
   style: value !important;
 }  

或者您可以增加选择器的特异性，例如:

.class tag{
   style: value;
}

这将优先于 bootstrap 的默认 CSS，假设它更具体。

我在阅读您的 SVG 代码时遇到问题，但为了让您的文本区域触发鼠标悬停，我会将两个元素包装在一个容器中，然后在该容器元素上触发 mousemove。