Измените стиль SVG, когда он витает над не-братом div

Я хотел бы иметь возможность изменить стиль моего встроенного логотипа svg, когда мышь зависает над другим подразделением, в другом месте на странице.

Пока это упрощено, это мой html. (Очевидно, что у меня есть svg, но я вырезал все, кроме одного слоя, чтобы упростить процесс)

<!-- logo container -->

 <div> 

 <!-- start inline svg --> 

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

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

 <a href="#" target="_blank">

 <div>

 <span>

 Link text

 </span>

 </div>

 </a>

 <a href="#" target="_blank">

 <div>

 <span>

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

или любое другое разнообразие продвинутых селекторов оказались неэффективными.

Итак, я хотел бы знать, знает ли кто-нибудь метод изменения стиля моего SVG, когда я нахожусь над делением topLeft, предпочтительно используя только css (если возможно), но если это невозможно, использование javascript будет просто прекрасным.

Я ценю любой вклад, спасибо!

2 ответа

Вы можете установить идентификатор элемента, который хотите изменить, и вы также можете присвоить ему " onmouseover() " -method, который может изменить цвет или другие значения следующим образом:

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


Вы не можете сделать это с помощью CSS. Но это легко сделать с небольшим количеством Javascript.

Вот пример немного кода jQuery для этого:

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

Демо здесь

licensed under cc by-sa 3.0 with attribution.