更改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上

回答

相關問題