html - 将鼠标悬停在同级div上时更改SVG样式

当鼠标悬停在页面的其他部分时，我希望能够更改内联svg徽标的样式。
到目前为止，简而言之，这是我的html。（我的svg显然还有更多内容，但为了简化流程，我将除一层之外的所有内容都删除了）

<!-- logo container -->

    <div class='fullLogobg'>

        <!-- start inline svg -->

            <svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="2000px" height="2000px" viewBox="0 0 2000 2000" enable-background="new 0 0 2000 2000" xml:space="preserve">

                <text class='bottomLogoText' transform="matrix(1 0 0 1 49 1967)" fill="#9933FF" font-family="'TrajanPro3-Bold'" font-size="197">

                    Dummy Text

                </text>

            </svg>

        <!-- end inline svg -->

    </div>

<!-- end logo container -->



<!-- begin part of my navigation -->

    <div class='leftColumn'>

        <a href="#">

            <div class='topLeft'>

                <span class='linkText'>

                    Link text

                </span>

            </div>

        </a>

        <a href="#">

            <div class='bottomLeft'>

                <span class='linkText'>

                    Link text

                </span>

            </div>

        </a>

    </div>

<!-- end navigation -->

我想把重点放在svg中的文本上，再加上左上角类的除法；因此，这是我适用的css。（我不认为这种风格会对我想要完成的工作产生太大影响，我只是认为最好是为那些需要更多背景的人提供这种风格）。

.fullLogobg
{
    position:absolute;
    top:25%;
    left:25%;
    width:50%;
    height:50%;
    z-index:1;
    background-color: transparent;

}

.fullLogobg svg
{
    display:block;
    margin:0 auto;
    width:auto;
    height:100%;
    width:100%;
    z-index:1;
    background-color: transparent;

}

.leftColumn
{
    Width:50%;
    height:100%;
    background-color:transparent;
    overflow:auto;
    float:left;
    position:relative;
}

.topLeft
{
    margin:0%;
    width:96%;
    height:46%;
    background-color:transparent;
    display:block;
    border:3px #9933FF solid;
    position:absolute;
    top:0px;
    left:0px;
}

.topLeft:hover
{
    color:green;
    border:3px green solid;
}

.linkText
{

    text-align:center;
    display:block;
    width:100%;
    height:20px;
    font-size:20px;
    font-weight:700;
    color:inherit;
    position:absolute;
    top:50%;
    margin-top:-10px;
    background-color:transparent;

}

如你所见，我已将左上方的分区设置为在悬停时更改。我想做的是采取同样的悬停动作并更改svg文本的样式。我的主要问题是他们不是直接的兄弟姐妹，因此，利用

.topLeft:hover > .fullLogobg .bottomLogoText
{
    fill:green;
}

或

.topLeft:hover ~ div svg .bottomLogoText
{
    fill:green;
}

或者任何其他种类的高级选择器都被证明是无效的。
所以，我想知道，当我将鼠标悬停在左上角的部分时，是否有人知道更改svg样式的方法，最好只使用css（如果可能），但如果不可能，那么使用javascript就可以了。
感谢您的意见，谢谢！

最佳答案

您可以为要更改的元素设置一个id，然后还可以给它一个“onmouseover()”-方法，该方法可以更改颜色或其他值，如下所示：

var test = document.getElementById("YOUR_ID");
test.setAttribute("style", "fill:#EBC20E;");

关于html - 将鼠标悬停在同级div上时更改SVG样式，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23621005/