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

Question

当鼠标悬停在页面其他位置的另一个分区上时，我希望能够更改内联 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 中的文本，以及我与 topLeft 类的划分；因此，这是我适用的 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;

}

如您所见，我已将我的 topLeft 部门设置为在悬停时更改。我想做的是采取相同的悬停动作并更改我的 svg 文本的样式。我的主要问题是他们不是直系兄弟姐妹，因此，利用

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

或

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

或任何其他种类的高级选择器已被证明无效。

所以，我想知道是否有人知道当我将鼠标悬停在 topLeft 分区上时更改我的 svg 样式的方法，最好只使用 css（如果可能），但如果不可能，那么使用 javascript 就好了.

感谢您的任何意见，谢谢！

Answer 1

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

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

Answer 2

你不能用 CSS 做到这一点。但是用一点 Javascript 就很容易做到。

下面是一些 jQuery 代码的示例：

$(".topLeft").mouseover(function() {
    $("#Layer_2 text").get(0).style.fill = "green";
}).mouseout(function() {
    $("#Layer_2 text").get(0).style.fill = "#93f";
});

Demo here