KPC
Kevin Powell - Community•9mo ago
swirlingblueberrysmoothie

SCSS color elements from data-attr

Hi All, I have an<svg> world map with countries grouped by 4 areas : data-region="". Each area <g> has several countries inside them as <path>. On hover, all area is turning blue.
On top of map, I have 4 buttons, with same data-region as in svg. What I want to achieve, is to have both ( area and button) to change its color on hover in both ways: -hovering btn changes area color -hovering area changes also btn color. I was trying to achieve this in plain scss ( no js) but it doesn't work. Does anyone know what I'm doing wrong? Here is my code: https://codepen.io/blberrysmoothie/pen/abxXWVp?editors=1100
Jagoda
CodePen
map
...
5 Replies
Chris Bolson
Chris Bolson•9mo ago
You could try something like this: 
.map:has([data-region="emea"]:hover) [data-region="emea"],
.map:has([data-region="emea"]:hover) [data-region="emea"]>* {
    fill: blue;
    color: blue;
}

.map:has([data-region="latam"]:hover) [data-region="latam"],
.map:has([data-region="latam"]:hover) [data-region="latam"]>* {
  fill: blue;
  color: blue;
}
etc.
.map:has([data-region="emea"]:hover) [data-region="emea"],
.map:has([data-region="emea"]:hover) [data-region="emea"]>* {
    fill: blue;
    color: blue;
}

.map:has([data-region="latam"]:hover) [data-region="latam"],
.map:has([data-region="latam"]:hover) [data-region="latam"]>* {
  fill: blue;
  color: blue;
}
etc.
swirlingblueberrysmoothie
swirlingblueberrysmoothieOP•9mo ago
@Chris thank you!
Chris Bolson
Chris Bolson•9mo ago
Bear in mind that that solution uses :has() so might not work in some browers
swirlingblueberrysmoothie
swirlingblueberrysmoothieOP•9mo ago
right, thanks for pointing this out too! I will search for other solutions as well
ἔρως
ἔρως•9mo ago
why not write it as .map [data-region="..."]:hover { &, & >* { ...} }? you can even have a list and use @each for the values

Did you find this page helpful?