Change SVG styling while hovering over non-sibling div

Question

I would like to be able to change the styling of my inline svg logo while the mouse is hovered over another division, elsewhere on the page.

Thus far, simplified, this is my html. (There is obviously more to my svg but I cut out everything except one layer to simplify the process)

<!-- 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 -->

I would like to focus on the text in my svg, paired with my division with the topLeft class; thus, this is my applicable css. (I don't believe this styling should have much impact on what I am trying to accomplish, I just thought it'd be best to provide it for those who need a bit more context).

.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;

}

As you can see, I have set my topLeft division to change upon being hovered over. What I would like to do is take that same hover action and change the styling on my svg text. My main issue is that they are not direct siblings, thus, utilizing

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

or

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

or any other variety of the advanced selectors have proved ineffective.

So, I would like to know if anyone knows a method of changing my svg styling when I hover over the topLeft division, preferably utilizing only css (if possible), but if it's not possible then use of javascript would be just fine.

I appreciate any input, Thank You!

Answer 1

You can set an id to the element you want to change then you can also give it a "onmouseover()"-method which can change the color or other values as follows:

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

Answer 2

You can't do it with CSS. But it is easy to do with a bit of Javascript.

Here's an example of a bit of jQuery code to do it:

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

Demo here