如何影响onmouseover事件上以前的同级样式。CSS或JavaScript_Javascript_Html_Css_Css Selectors_Onmouseover

如何影响onmouseover事件上以前的同级样式。CSS或JavaScript

javascript html css

如何影响onmouseover事件上以前的同级样式。CSS或JavaScript,javascript,html,css,css-selectors,onmouseover,Javascript,Html,Css,Css Selectors,Onmouseover,我使用内联SVG创建了一个地图。每个区域在悬停时亮起（使用CSS解决）。我想要实现的是，当相应的地区名称悬停时，该地区也应该亮起我无法用CSS3实现这一点，因为它没有以前的同级选择器。我也不能更改标记结构，使区域位于标题之后。为什么？因为文本就在地区的后面。（使用z索引也不起作用。）然后，我希望找到一个Javascript解决方案，使用onmouseover事件触发一个函数，该函数将作为当前悬停文本的前一个同级来更改其样式我的标记的一部分： <path class="district

我使用内联SVG创建了一个地图。每个区域在悬停时亮起（使用CSS解决）。我想要实现的是，当相应的地区名称悬停时，该地区也应该亮起

我无法用CSS3实现这一点，因为它没有以前的同级选择器。我也不能更改标记结构，使区域位于标题之后。为什么？因为文本就在地区的后面。（使用z索引也不起作用。）

然后，我希望找到一个Javascript解决方案，使用onmouseover事件触发一个函数，该函数将作为当前悬停文本的前一个同级来更改其样式

我的标记的一部分：

<path class="district-map" d="M264.741,21.661,323.1,155.235l179.3,85.439L496.992,21.661Z" transform="translate(-21 7)"/>
<text onmouseover="myFunction()" class="district-text" transform="translate(349 99)">
    <tspan x="0" y="0">District 5</tspan>
</text>

最后，Javascript：

function myFuntion() {
    var district = this.previousSibling;
    district.style.fill = "#fff";
}

我在这里遗漏了什么，什么不正常？（顺便说一句，我在JavaScript是一个彻头彻尾的傻瓜）

谢谢你的意见

完整片段：

<html>
<head>
    <style>
        svg {
            width: 100%;
            height: 100%;
    max-width: 500px;
    max-height: 500px;
    display: block;
    margin: auto;
        }
    </style>
</head>
<body>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500">
        <defs>
            <style>
              path.district-map {
                    fill: #00ff90;
                    transition: fill 0.2s;
                }
                path.district-map:hover {
                    fill: #fff;
                }
                .district-text {
                    fill: #5b5b5b;
                    font-size: 20px;
                    font-family: SegoeUI, Segoe UI;
                }
                .container  {
                    fill: #d1d1d1;
                }
            </style>
            <script>
              function myFuntion() {
                 var district = this.previousSibling;
                 district.style.fill = "#fff";
}
            </script>
        </defs>
            <rect class="container" width="500" height="500"/>

            <path class="district-map" d="M264.741,21.661,323.1,155.235l179.3,85.439L496.992,21.661Z" transform="translate(-21 7)"/>
            <text class="district-text" onmouseover = "myFunction()" transform="translate(349 99)"><tspan x="0" y="0">District 5</tspan></text>

            <path class="district-map" d="M51.745,21.661V149.82l108.9,95.668L272.563,94.465l-28.279-72.8Z" transform="translate(-21 7)"/>
            <text class="district-text" onmouseover = "myFunction()" transform="translate(87 112)"><tspan x="0" y="0">District 4</tspan></text>

            <path class="district-map" d="M51.745,179.3l100.481,81.227L131.167,289.41l178.1,187.124H51.745Z" transform="translate(-21 7)"/>
            <text class="district-text" onmouseover = "myFunction()" transform="translate(75 414)"><tspan x="0" y="0">District 3</tspan></text>

            <path class="district-map" d="M429,217.81l75.812,43.321v210.59l-181.107,3.61L297.232,442.84Z" transform="translate(-21 7)"/>
            <text class="district-text" onmouseover = "myFunction()" transform="translate(374 379)"><tspan x="0" y="0">District 2</tspan></text>

            <path class="district-map" d="M284,109.507,155.235,285.2,291.817,427.8l125.752-216-107.1-49.338Z" transform="translate(-21 7)"/>
            <text class="district-text" onmouseover = "myFunction()" transform="translate(226 272)"><tspan x="0" y="0">District 1</tspan></text>
    </svg>
</body>


svg{
宽度：100%；
身高：100%；
最大宽度：500px；
最大高度：500px；
显示：块；
保证金：自动；
}
道路及地区地图{
填充：#00ff90；
过渡：填充0.2s；
}
路径。地区地图：悬停{
填充：#fff；
}
.地区文本{
填充：#5b；
字体大小：20px；
字体系列：SegoeUI、SegoeUI；
}
.集装箱{
填充：#d1d1；
}
函数myFuntion（）{
var district=this.previousSibling；
district.style.fill=“#fff”；
}
第五区
第四区
第三区
第2区
第一区

只需使用SVG

元素（）对district+文本进行分组/包装，然后更改CSS以在组悬停时做出反应：


svg{
宽度：100%；
身高：100%；
最大宽度：500px；
最大高度：500px；
显示：块；
保证金：自动；
}
道路及地区地图{
填充：#00ff90；
过渡：填充0.2s；
}
g:悬停路径。地区地图{
填充：#fff；
}
.地区文本{
填充：#5b；
字体大小：20px；
字体系列：SegoeUI、SegoeUI；
}
.集装箱{
填充：#d1d1；
}
第五区
第四区
第三区
第2区
第一区

我推荐@skobaljic使用CSS的解决方案，但是如果您真的想使用js，下面是示例代码：

const textElement = document.querySelector('.district-text');
textElement.addEventListener('mouseover', e => {
    e.target.parentNode.previousSibling.previousSibling.style.fill = '#fff';
});
textElement.addEventListener('mouseout', e => {
    e.target.parentNode.previousSibling.previousSibling.style.fill = '#00ff90';
});

我认为提议的解决方案都不管用。您需要在主映射块上设置鼠标事件处理程序，并让它们更改路径和文本的属性。像这样：

window.onload=function () {
    var districts = document.getElementsByClassName("district-map");
    console.log(districts);

    var overAction = function() {
        var district = this;
        var disctrictText = district.nextSibling.nextSibling;
        district.style.fill = "#fff";
        disctrictText.style.fill = "#f00";
    }

    var outAction = function() {
        var district = this;
        var disctrictText = district.nextSibling.nextSibling;
        district.style.fill = "#00ff90";
        disctrictText.style.fill = "#000";
    }

    for (var i=0; i < districts.length; i++) {
        districts[i].onmouseover = overAction;
        districts[i].onmouseout = outAction;
    }
}

window.onload=函数（）{
var districts=document.getElementsByClassName（“地区地图”）；
控制台.日志（地区）；
var overAction=函数（）{
var区=此；
var districtext=district.nextSibling.nextSibling；
district.style.fill=“#fff”；
DistrictText.style.fill=“#f00”；
}
var outAction=function（）{
var区=此；
var districtext=district.nextSibling.nextSibling；
district.style.fill=“#00ff90”；
DistrictText.style.fill=“#000”；
}
对于（变量i=0；i<1.length；i++）{
地区[i].onmouseover=过度活动；
地区[i].onmouseout=outAction；
}
}

并删除：悬停css

--编辑：--

调用.nextSibling失败，因为不知何故，它被包装在另一个“ghost”元素中。。。因此，.nextSibling.nextSibling调用。

您的代码笔不包含javascript代码。另外，你可以在你的问题中添加一个代码窃贼，不需要外部链接。我刚刚意识到我的代码笔没有保存。谢谢你的通知。立即更改将

text{pointer events:none}

添加到您的CST中感谢您的帮助。整个事情我想得太多了。这么简单的解决办法：）

window.onload=function () {
    var districts = document.getElementsByClassName("district-map");
    console.log(districts);

    var overAction = function() {
        var district = this;
        var disctrictText = district.nextSibling.nextSibling;
        district.style.fill = "#fff";
        disctrictText.style.fill = "#f00";
    }

    var outAction = function() {
        var district = this;
        var disctrictText = district.nextSibling.nextSibling;
        district.style.fill = "#00ff90";
        disctrictText.style.fill = "#000";
    }

    for (var i=0; i < districts.length; i++) {
        districts[i].onmouseover = overAction;
        districts[i].onmouseout = outAction;
    }
}