将鼠标悬停在一个元素上并选择具有相同类的所有元素

【问题标题】：Hover over one element and select all elements with the same class将鼠标悬停在一个元素上并选择具有相同类的所有元素
【发布时间】：2022-06-15 09:38:52
【问题描述】：

这是我在学校的第一个 JavaScript 项目，我不知道如何获得可行的解决方案。 请参阅我的 HTML 代码。有一张绿色地图，当将鼠标悬停在它上面时，它应该将颜色变为黄色。问题是，有单独的 SVG 图形（岛），不会改变它们的颜色。

    Is there a JavaScript solution, that all SVG paths change their color, when mouse is over only one SVG path?
    
    I would be so happy and thanful to get some help. 
    


.cls-4 {
  fill: #7ec353;
  stroke: #020202;
  stroke-width: 4px;
  transition: 0.3s;
}

.cls-4:hover {
  fill: #d1b308;
  cursor: pointer;
}
<div class="map">

  <svg id="Terrain" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4280.57 5494.61">
        
                <g id="0-250m">
                    
                    <path class="cls-4"
                    d="M1237.03,239.22c4.1-5.74,1.62-16.81,0-26.24-1.64-9.41-2.05-6.54-8.6-8.6-6.57-2.05-11.08,.41-25.81,0-14.77-.41-32.79-4.52-34.86-4.9-2.03-.43-1.62,4.9-4.51,8.59-2.87,3.69-4.9,4.91-4.9,14.34s2.87,10.24,9.01,14.35c6.14,4.1,15.16,11.06,28.27,12.29,13.11,1.23,20.09,0,30.32,0s6.96-4.08,11.07-9.83Z" />
                <path class="cls-4"
                    d="M1142.37,233.9c-4.08-4.11-5.74-4.91-9.83,0-4.08,4.92-11.88,21.71-12.28,26.64-.43,4.9-2.06,15.96,2.24,21.3,4.3,5.32,6.76,12.7,11.69,15.57,4.92,2.87,4.92,9.43,11.05,0,6.16-9.44,7.39-6.57,2.87-13.11-4.51-6.57-13.5-10.67-12.91-16.4,.63-5.73-1.43-16.81,1.86-21.3,3.26-4.49,9.41-8.59,5.31-12.7Z" />
                <path class="cls-4"
                    d="M1239.27,361.34c1.45,6.54,1.4,11.49,5.11,15.16,3.73,3.69,16.83,12.27,20.93,7.79,4.11-4.51,10.24-15.57,9.85-20.48-.41-4.92,5.73-9.44,7.77-13.93,2.06-4.52,.84-9.03-5.31-8.61-6.16,.39-11.42,0-16.16,2.45-4.74,2.47-23.62,11.06-22.17,17.63Z" />
                <path class="cls-4"
                    d="M1255.47,332.24c3.7-2.87,6.78-.8,6.04-4.3-.7-3.47-1.21-8.4-6.51-8.81-5.26-.39-4.38-1.42-5.26-.39-2.43,2.74,2.05,16.37,5.73,13.5Z" />
                <path class="cls-4"
                    d="M1301.37,281.85c4.93-5.34,8.61-9.03,2.87-13.12-5.75-4.08-6.27,.43-7.62,0-1.39-.41-13.27,10.67-8.76,15.58,4.51,4.92,8.61,2.87,13.52-2.46Z" />
                <path class="cls-4"
                    d="M1177.6,316.67c-3.67-.82-4.08-2.46-5.73,0-1.62,2.46-5.72,23.35,2.06,22.53,7.79-.8,10.24-2.38,7.79-8.37-2.46-5.97-.39-13.35-4.11-14.16Z" />
                <path class="cls-4"
                    d="M1223.51,341.22c6.54-.38,7.37-3.39,6.54-8.63-.8-5.27-1.23-8.54-6.96-8.96-5.74-.39-11.06,0-13.93,0s7.82,17.99,14.36,17.6Z" />
                <path class="cls-4"
                    d="M1175.98,351.51c-3.69,1.62-2.46,22.12,2.05,23.34,4.51,1.23,11.47,3.7,10.26-3.67-1.23-7.37,0-12.29-3.72-16.4-3.67-4.1-4.9-4.9-8.59-3.26Z" />
                <path class="cls-4"
                    d="M1198.81,418.28c-3.99-5.32-6.55-7.36-10.39-13.09-3.86-5.75-9.58-8.21-12.45-8.62-2.87-.41-2.05-4.08-2.87-.41-.82,3.69,1.23,20.48,4.91,24.17s7.39,7.8,12.27,7.39c4.95-.43,12.5-4.1,8.51-9.44Z" />
                <path class="cls-4"
                    d="M1281.7,396.89c-.43,2.14,8.18,8.3,11.47,5.01,3.28-3.29,.08-12.7-4.68-12.29-4.74,.41-6.38,5.14-6.79,7.28Z" />
                <path class="cls-4"
                    d="M1265.32,684.23c3.28-10.26,6.13-14.75,1.64-18.86-4.51-4.1-6.98-6.14-10.67-4.9-3.69,1.23-7.79,24.98-.41,28.27,7.38,3.28,6.16,5.73,9.44-4.51Z" />
                <path class="cls-4"
                    d="M3026.95,335.07c3.15-11.8,7.07-11,7.07-22.79s-.8-12.32,0-21.07c.77-8.76,1.58-7.2,5.48-15.84,3.92-8.63,4.73-13.34,0-18.83-4.71-5.5-2.13-14.13,3.26-12.57,5.39,1.57,10.89,.77,5.39-8.64-5.52-9.41-1.96-11.77-11.58-3.92-9.63,7.85-9.63,3.14-9.63,7.85s-4.71,32.99-3.15,41.61c1.58,8.62,1.72,26.69-.3,35.33-2.04,8.63,.3,30.63,3.45,18.86Z" />
                <path class="cls-4"
                    d="M1147.69,745.43c5.58,5.59,11.16,5.59,17.43,3.48,6.29-2.08,14.66,.6,8.37-6.34-6.27-6.9,4.19-6.21-6.27-6.9-10.46-.68-25.1,4.17-19.52,9.75Z" />
                <path class="cls-4"
                    d="M1138.63,827.73c10.46-2.1,16.04-.35,16.04-6.45s-3.17-11-8.21-12.4c-5.04-1.39-18.29,20.93-7.83,18.85Z" />

        </g>
        </svg>
</div>
    <pre>
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Map</title>
    
        <style>
            .cls-4 {
            fill: #7ec353;
            stroke: #020202;
            stroke-width: 4px;
            transition: 0.3s;
        }
        
        .cls-4:hover {
            fill: #d1b308; 
        }
        </style>
    
    </head>
    <body>
        
        <div class="map">
    
            <svg id="Terrain" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4280.57 5494.61">
        
                <g id="0-250m">
                    
                    <path class="cls-4"
                    d="M1237.03,239.22c4.1-5.74,1.62-16.81,0-26.24-1.64-9.41-2.05-6.54-8.6-8.6-6.57-2.05-11.08,.41-25.81,0-14.77-.41-32.79-4.52-34.86-4.9-2.03-.43-1.62,4.9-4.51,8.59-2.87,3.69-4.9,4.91-4.9,14.34s2.87,10.24,9.01,14.35c6.14,4.1,15.16,11.06,28.27,12.29,13.11,1.23,20.09,0,30.32,0s6.96-4.08,11.07-9.83Z" />
                <path class="cls-4"
                    d="M1142.37,233.9c-4.08-4.11-5.74-4.91-9.83,0-4.08,4.92-11.88,21.71-12.28,26.64-.43,4.9-2.06,15.96,2.24,21.3,4.3,5.32,6.76,12.7,11.69,15.57,4.92,2.87,4.92,9.43,11.05,0,6.16-9.44,7.39-6.57,2.87-13.11-4.51-6.57-13.5-10.67-12.91-16.4,.63-5.73-1.43-16.81,1.86-21.3,3.26-4.49,9.41-8.59,5.31-12.7Z" />
                <path class="cls-4"
                    d="M1239.27,361.34c1.45,6.54,1.4,11.49,5.11,15.16,3.73,3.69,16.83,12.27,20.93,7.79,4.11-4.51,10.24-15.57,9.85-20.48-.41-4.92,5.73-9.44,7.77-13.93,2.06-4.52,.84-9.03-5.31-8.61-6.16,.39-11.42,0-16.16,2.45-4.74,2.47-23.62,11.06-22.17,17.63Z" />
                <path class="cls-4"
                    d="M1255.47,332.24c3.7-2.87,6.78-.8,6.04-4.3-.7-3.47-1.21-8.4-6.51-8.81-5.26-.39-4.38-1.42-5.26-.39-2.43,2.74,2.05,16.37,5.73,13.5Z" />
                <path class="cls-4"
                    d="M1301.37,281.85c4.93-5.34,8.61-9.03,2.87-13.12-5.75-4.08-6.27,.43-7.62,0-1.39-.41-13.27,10.67-8.76,15.58,4.51,4.92,8.61,2.87,13.52-2.46Z" />
                <path class="cls-4"
                    d="M1177.6,316.67c-3.67-.82-4.08-2.46-5.73,0-1.62,2.46-5.72,23.35,2.06,22.53,7.79-.8,10.24-2.38,7.79-8.37-2.46-5.97-.39-13.35-4.11-14.16Z" />
                <path class="cls-4"
                    d="M1223.51,341.22c6.54-.38,7.37-3.39,6.54-8.63-.8-5.27-1.23-8.54-6.96-8.96-5.74-.39-11.06,0-13.93,0s7.82,17.99,14.36,17.6Z" />
                <path class="cls-4"
                    d="M1175.98,351.51c-3.69,1.62-2.46,22.12,2.05,23.34,4.51,1.23,11.47,3.7,10.26-3.67-1.23-7.37,0-12.29-3.72-16.4-3.67-4.1-4.9-4.9-8.59-3.26Z" />
                <path class="cls-4"
                    d="M1198.81,418.28c-3.99-5.32-6.55-7.36-10.39-13.09-3.86-5.75-9.58-8.21-12.45-8.62-2.87-.41-2.05-4.08-2.87-.41-.82,3.69,1.23,20.48,4.91,24.17s7.39,7.8,12.27,7.39c4.95-.43,12.5-4.1,8.51-9.44Z" />
                <path class="cls-4"
                    d="M1281.7,396.89c-.43,2.14,8.18,8.3,11.47,5.01,3.28-3.29,.08-12.7-4.68-12.29-4.74,.41-6.38,5.14-6.79,7.28Z" />
                <path class="cls-4"
                    d="M1265.32,684.23c3.28-10.26,6.13-14.75,1.64-18.86-4.51-4.1-6.98-6.14-10.67-4.9-3.69,1.23-7.79,24.98-.41,28.27,7.38,3.28,6.16,5.73,9.44-4.51Z" />
                <path class="cls-4"
                    d="M3026.95,335.07c3.15-11.8,7.07-11,7.07-22.79s-.8-12.32,0-21.07c.77-8.76,1.58-7.2,5.48-15.84,3.92-8.63,4.73-13.34,0-18.83-4.71-5.5-2.13-14.13,3.26-12.57,5.39,1.57,10.89,.77,5.39-8.64-5.52-9.41-1.96-11.77-11.58-3.92-9.63,7.85-9.63,3.14-9.63,7.85s-4.71,32.99-3.15,41.61c1.58,8.62,1.72,26.69-.3,35.33-2.04,8.63,.3,30.63,3.45,18.86Z" />
                <path class="cls-4"
                    d="M1147.69,745.43c5.58,5.59,11.16,5.59,17.43,3.48,6.29-2.08,14.66,.6,8.37-6.34-6.27-6.9,4.19-6.21-6.27-6.9-10.46-.68-25.1,4.17-19.52,9.75Z" />
                <path class="cls-4"
                    d="M1138.63,827.73c10.46-2.1,16.04-.35,16.04-6.45s-3.17-11-8.21-12.4c-5.04-1.39-18.29,20.93-7.83,18.85Z" />

        
        </div>
    
    </body>
    </html>
    </pre>

【问题讨论】：

  • 欢迎堆栈溢出。代码似乎按预期工作。只是您的HTML 格式错误。缺少 g 和 svg 结束标签。签出嵌入式 sn-p
  • 您好 Susbanth，感谢您的回答和有关缺失标签的信息。我会解决这个问题。但我的问题是，当您悬停一个岛屿时，所有其他岛屿也应显示为悬停。目前，只有小岛将颜色变为黄色，鼠标所在的位置。但所有岛屿都应将颜色变为黄色，具体取决于鼠标所在的岛屿

标签： javascript svg onmouseover


【解决方案1】：

SVG 元素的工作方式与普通 HTML 元素一样，您可以添加包含所有 &lt;path&gt; 标记的 &lt;g&gt; 标记作为类名，例如 color-group；然后将 CSS 选择器重写为

.color-group {
  fill: #7ec353;
  stroke: #020202;
  stroke-width: 4px;
  transition: 0.3s;
}

.color-group:hover {
  fill: #d1b308;
}

有一个例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Map</title>
    <style>
        .color-group {
            fill: #7ec353;
            stroke: #020202;
            stroke-width: 4px;
            transition: 0.3s;
        }

        .color-group:hover {
            fill: #d1b308;
        }
    </style>
</head>
<body>
    <div class="map">
        <svg id="Terrain" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4280.57 5494.61">
            <g class="color-group" id="0-250m">
                <path class="cls-4"
                    d="M1237.03,239.22c4.1-5.74,1.62-16.81,0-26.24-1.64-9.41-2.05-6.54-8.6-8.6-6.57-2.05-11.08,.41-25.81,0-14.77-.41-32.79-4.52-34.86-4.9-2.03-.43-1.62,4.9-4.51,8.59-2.87,3.69-4.9,4.91-4.9,14.34s2.87,10.24,9.01,14.35c6.14,4.1,15.16,11.06,28.27,12.29,13.11,1.23,20.09,0,30.32,0s6.96-4.08,11.07-9.83Z" />
                <path class="cls-4"
                    d="M1142.37,233.9c-4.08-4.11-5.74-4.91-9.83,0-4.08,4.92-11.88,21.71-12.28,26.64-.43,4.9-2.06,15.96,2.24,21.3,4.3,5.32,6.76,12.7,11.69,15.57,4.92,2.87,4.92,9.43,11.05,0,6.16-9.44,7.39-6.57,2.87-13.11-4.51-6.57-13.5-10.67-12.91-16.4,.63-5.73-1.43-16.81,1.86-21.3,3.26-4.49,9.41-8.59,5.31-12.7Z" />
                <path class="cls-4"                     d="M1239.27,361.34c1.45,6.54,1.4,11.49,5.11,15.16,3.73,3.69,16.83,12.27,20.93,7.79,4.11-4.51,10.24-15.57,9.85-20.48-.41-4.92,5.73-9.44,7.77-13.93,2.06-4.52,.84-9.03-5.31-8.61-6.16,.39-11.42,0-16.16,2.45-4.74,2.47-23.62,11.06-22.17,17.63Z" />
                <path class="cls-4"
                    d="M1255.47,332.24c3.7-2.87,6.78-.8,6.04-4.3-.7-3.47-1.21-8.4-6.51-8.81-5.26-.39-4.38-1.42-5.26-.39-2.43,2.74,2.05,16.37,5.73,13.5Z" />
                <path class="cls-4"
                    d="M1301.37,281.85c4.93-5.34,8.61-9.03,2.87-13.12-5.75-4.08-6.27,.43-7.62,0-1.39-.41-13.27,10.67-8.76,15.58,4.51,4.92,8.61,2.87,13.52-2.46Z" />
                <path class="cls-4"
                    d="M1177.6,316.67c-3.67-.82-4.08-2.46-5.73,0-1.62,2.46-5.72,23.35,2.06,22.53,7.79-.8,10.24-2.38,7.79-8.37-2.46-5.97-.39-13.35-4.11-14.16Z" />
                <path class="cls-4"
                    d="M1223.51,341.22c6.54-.38,7.37-3.39,6.54-8.63-.8-5.27-1.23-8.54-6.96-8.96-5.74-.39-11.06,0-13.93,0s7.82,17.99,14.36,17.6Z" />
                <path class="cls-4"
                    d="M1175.98,351.51c-3.69,1.62-2.46,22.12,2.05,23.34,4.51,1.23,11.47,3.7,10.26-3.67-1.23-7.37,0-12.29-3.72-16.4-3.67-4.1-4.9-4.9-8.59-3.26Z" />
                <path class="cls-4"
                    d="M1198.81,418.28c-3.99-5.32-6.55-7.36-10.39-13.09-3.86-5.75-9.58-8.21-12.45-8.62-2.87-.41-2.05-4.08-2.87-.41-.82,3.69,1.23,20.48,4.91,24.17s7.39,7.8,12.27,7.39c4.95-.43,12.5-4.1,8.51-9.44Z" />
                <path class="cls-4"
                    d="M1281.7,396.89c-.43,2.14,8.18,8.3,11.47,5.01,3.28-3.29,.08-12.7-4.68-12.29-4.74,.41-6.38,5.14-6.79,7.28Z" />
                <path class="cls-4"
                    d="M1265.32,684.23c3.28-10.26,6.13-14.75,1.64-18.86-4.51-4.1-6.98-6.14-10.67-4.9-3.69,1.23-7.79,24.98-.41,28.27,7.38,3.28,6.16,5.73,9.44-4.51Z" />
                <path class="cls-4"
                    d="M3026.95,335.07c3.15-11.8,7.07-11,7.07-22.79s-.8-12.32,0-21.07c.77-8.76,1.58-7.2,5.48-15.84,3.92-8.63,4.73-13.34,0-18.83-4.71-5.5-2.13-14.13,3.26-12.57,5.39,1.57,10.89,.77,5.39-8.64-5.52-9.41-1.96-11.77-11.58-3.92-9.63,7.85-9.63,3.14-9.63,7.85s-4.71,32.99-3.15,41.61c1.58,8.62,1.72,26.69-.3,35.33-2.04,8.63,.3,30.63,3.45,18.86Z" />
                <path class="cls-4"
                    d="M1147.69,745.43c5.58,5.59,11.16,5.59,17.43,3.48,6.29-2.08,14.66,.6,8.37-6.34-6.27-6.9,4.19-6.21-6.27-6.9-10.46-.68-25.1,4.17-19.52,9.75Z" />
                <path class="cls-4"
                    d="M1138.63,827.73c10.46-2.1,16.04-.35,16.04-6.45s-3.17-11-8.21-12.4c-5.04-1.39-18.29,20.93-7.83,18.85Z" />
            </g>
        </svg>
    </div>
</body>
</html>

【讨论】：

    猜你喜欢
    • 1970-01-01
    • 2012-01-30
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-10-15
    • 2015-11-18
    • 2020-01-03
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode