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

Posted 2023-05-08

【中文标题】将鼠标悬停在非同级 div 上时更改 SVG 样式

【英文标题】：Change SVG styling while hovering over non-sibling div

【发布时间】：2014-06-30 12:32:13

【问题描述】：

当鼠标悬停在页面其他位置的另一个分区上时，我希望能够更改内联 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"   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 就好了.

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

【参考方案1】：

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

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

【讨论】：

非常感谢，这就是我最终完成的工作。我希望用 CSS 来解决这个问题，但我怀疑它是否可行，所以这应该可以正常工作。起初我对使用 Javascript 犹豫不决，因为我还不太擅长它，所以我很高兴有一个简单易懂的解决方案。

【参考方案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

【讨论】：

感谢您的意见。我还没有弄乱 jQuery，但是一旦我进入它，我可能会考虑这个解决方案。感谢您抽出宝贵时间提出一些建议，但我现在可能只是最终使用 mika 的解决方案。

我们的解决方案其实是一样的。

是吗？对不起。就像我说的，我没有接触过 jQuery，所以我不太明白你的代码在说什么。不过，我感谢您的帮助。