堆栈内存溢出
  简体   繁体   English

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

[英]Hover over one element and select all elements with the same class

 原文  2022-06-10 07:55:24  1   1    javascript/ svg/ onmouseover

问题描述

Please see my HTML code.请参阅我的 HTML 代码。 There is a green map and when hovering over it, it should change the color to yellow.有一张绿色地图，当将鼠标悬停在它上面时，它应该将颜色变为黄色。 The problem is, that there are separate SVG graphics (island), that not change their color.问题是，有单独的 SVG 图形（岛）不会改变它们的颜色。

Is there a JavaScript solution, that all SVG paths change their color, when mouse is over only one SVG path?当鼠标只悬停在一个 SVG 路径上时，是否有 JavaScript 解决方案，所有 SVG 路径都会改变颜色？ 

 .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>

1 个解决方案

解决方案1
 0  2022-06-10 08:23:03

SVG elements work like normal HTML element, you can add the <g> tag which contains all the <path> tag a class name, like color-group ; SVG 元素像普通 HTML 元素一样工作，您可以添加包含所有<path>标记的<g>标记类名，如color-group ； then rewrite the CSS selector to然后将 CSS 选择器重写为

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

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

there is an example有一个例子

 <!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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 CSS悬停在两个不同的元素上并影响一个相同的元素 - CSS hover over two different elements and affect one same element 为什么jQuery悬停在一个元素上，突出显示所有元素 - why jquery hover over one element, highlights all elements 如果将鼠标悬停在某个元素上，如何在jQuery中选择所有包含并包含它的同级元素？ - If I hover over an element, how can I select all sibling elements before it and including it, in jQuery? 将鼠标悬停在元素上时如何突出显示具有相同 css 类的所有元素？ 我想添加鼠标效果，如放大 - Elementor WordPress - How to highlight all elements with the same css class when you hover over an element? I want to add mouse effect like Zoom In - Elementor WordPress 仅将 ngClass 用于一个元素，而不是所有具有相同 class 的元素 - Using ngClass for only one element and not all elements with the same class 在JavaScript中-选择所有具有相同类的元素-单击除外 - in JavaScript - select all elements with same class - except clicked one 将鼠标悬停在一个类上影响页面上所有其他同类 - Make hover over one class affect all other of same class on page jQuery-将鼠标悬停在一个元素上可以更改两个不同的元素 - jQuery - Hover over one element to change two different elements 按索引选择元素（同一类的多个元素） - Select element by index (multiple elements of same class) 之前如何选择同一类的所有元素 - How to select all elements of the same class before
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM