Зависание только на классе - PullRequest
Новая
       26

Зависание только на классе

0 голосов
/ 18 апреля 2019

Я создаю интерактивную карту мира, в которой при наведении на регионы регионы меняют цвет. У меня есть документ SVG и созданы классы для группировки идентификаторов. Когда я заполняю CSS, весь класс меняет цвет, но когда я .class: hover, он меняет цвет только на идентификатор. 

<style>
.NA:hover { fill: #ED0887 !important }
.LA:hover { fill: #ED0887 !important }
</style>

пример в SVG: 

 <path class="LA" fill="black" id="costa rica" d="m217.38,304.98l1.39,2.72l1.13,1.5l-1.52,4.51l-2.9,-2.04l- etc..

Это должно изменить цвета для всех идентификаторов в классе.

Ответы [ 2 ]

0 голосов
/ 23 апреля 2019

Я сгруппировал их с <g> в SVG и использовал g:hover для наведения на определенные комбинированные идентификаторы. Спасибо за всех!

0 голосов
/ 19 апреля 2019

Сначала я не понял вашего вопроса, но вот мое редактирование: 

.big{
  fill:#FFFFFF;
  stroke:#000;
}
.small{
  fill: #ccc;
  stroke:#000;
}

path:hover{
  fill:#000;
  stroke:#ccc;
}
<svg width="109.38px" height="113.5px" viewBox="0 0 109.38 113.5">

<path class="big" d="M78.5,24c41,41,40,89,0,89s-78-58-78-78S17.5,0.5,35,0.5S78.5,24,78.5,24z"/>
<path class="small" d="M47.5,43c-9,8-13,24,0,24s22,17,29,0s23-30,7-29s-11,3-19,4S47.5,43,47.5,43z"/>
<path class="small" d="M66.5,50c-0.18,0-0.39-0.01-0.63-0.02c-2.4-0.13-7.37-0.71-7.37,2.02c0,3-4,6,2,7s15-2,16-5s2-7-3-6
	S66.5,50,66.5,50"/>
</svg>

Если вы хотите сохранить это в одном конкретном SVG, тогда вы должны дать этому SVG класс или идентификатор: 

#my-svg > path:hover{
  fill:#000;
  stroke:#ccc;
}
.big{
  fill:#FFFFFF;
  stroke:#000;
}
.small{
  fill: #ccc;
  stroke:#000;
}
<!--svg you want the hover on-->

<svg id="my-svg" width="109.38px" height="113.5px" viewBox="0 0 109.38 113.5">
<path class="big" d="M78.5,24c41,41,40,89,0,89s-78-58-78-78S17.5,0.5,35,0.5S78.5,24,78.5,24z"/>
<path class="small" d="M47.5,43c-9,8-13,24,0,24s22,17,29,0s23-30,7-29s-11,3-19,4S47.5,43,47.5,43z"/>
<path class="small" d="M66.5,50c-0.18,0-0.39-0.01-0.63-0.02c-2.4-0.13-7.37-0.71-7.37,2.02c0,3-4,6,2,7s15-2,16-5s2-7-3-6
	S66.5,50,66.5,50"/>
</svg>

<!--svg you dont want hover on-->

<svg id="other-svg" width="109.38px" height="113.5px" viewBox="0 0 109.38 113.5">
<path class="big" d="M78.5,24c41,41,40,89,0,89s-78-58-78-78S17.5,0.5,35,0.5S78.5,24,78.5,24z"/>
<path class="small" d="M47.5,43c-9,8-13,24,0,24s22,17,29,0s23-30,7-29s-11,3-19,4S47.5,43,47.5,43z"/>
<path class="small" d="M66.5,50c-0.18,0-0.39-0.01-0.63-0.02c-2.4-0.13-7.37-0.71-7.37,2.02c0,3-4,6,2,7s15-2,16-5s2-7-3-6
	S66.5,50,66.5,50"/>
</svg>

Вы могли бы даже сделать более конкретным, сделав группы с классами, а затем еще более конкретным, указав пути классов: 

.my-group > my-path:hover{
        fill:#000;
          stroke:#ccc;
}

UPDATE:

Для наведения всех путей в одном классе: 

.my-svg:hover > path{
  fill:#0097A7;
  stroke:#ccc;
}
.big{
  fill:#FFFFFF;
  stroke:#000;
}
.small{
  fill: #ccc;
  stroke:#000;
}
 <svg class="my-svg" width="109.38px" height="113.5px" viewBox="0 0 109.38 113.5">
    <path class="big" d="M78.5,24c41,41,40,89,0,89s-78-58-78-78S17.5,0.5,35,0.5S78.5,24,78.5,24z"/>
    <path class="small" d="M47.5,43c-9,8-13,24,0,24s22,17,29,0s23-30,7-29s-11,3-19,4S47.5,43,47.5,43z"/>
    <path class="small" d="M66.5,50c-0.18,0-0.39-0.01-0.63-0.02c-2.4-0.13-7.37-0.71-7.37,2.02c0,3-4,6,2,7s15-2,16-5s2-7-3-6
    	S66.5,50,66.5,50"/>
    </svg>
...