Question

我希望能够在鼠标悬停在页面上其他位置的另一个部门时更改我的内联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" 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中的文本，与我的部门配合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就好了

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

Answer 1

您可以为要更改的元素设置ID，然后您也可以为其提供一个＆＃34; onmouseover()＆＃34; -method，它可以更改颜色或其他值，如下所示：

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

Answer 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

将鼠标悬停在非兄弟div上时更改SVG样式

2 个答案: