更改SVG样式，同时悬停在非兄弟div上

我希望能够在鼠标悬停在页面其他位置的另一个分区上时更改我的内联svg徽标的样式。更改SVG样式，同时悬停在非兄弟div上

到目前为止，简化，这是我的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; 

}

正如你所看到的，我已经将我的topLeft部门设置为在盘旋时进行更改。我想要做的是采取相同的悬停行动，并改变我的SVG文本的样式。我的主要问题是，它们不是直接兄弟姐妹，因此，利用

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

或

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

或任何其他多种先进的选择器已被证明是无效的。

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

我很欣赏任何输入，谢谢！

来源

2014-05-13 Austin Fish

您可以设置一个ID到要改变那么元素，你也可以给它一个“onmouseover() “ - 可以更改颜色或其他值的方法如下：

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

来源

2014-05-13 15:47:31 Michael

非常感谢，这是我最终做的。我希望能用CSS解决这个问题，但是我怀疑它是否可行，所以这应该工作得很好。我一开始对使用Javascript犹豫不决，因为我还不太好，所以我很高兴有一个解决方案足以让我理解。 –

你不能用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

来源

2014-05-13 15:35:55

谢谢您的输入。我还没有搞砸jQuery，但一旦我进入它，我可能会考虑这个解决方案。我很感激你花时间提出一些建议，但我现在可能只是最终使用mika的解决方案。 –

我们的解决方案实际上是一样的。 –

他们？对不起。就像我说的，我没有碰过jQuery，所以我不太清楚你的代码在说什么。不过，我感谢你的帮助。 –

更改SVG样式，同时悬停在非兄弟div上

回答

相关问题