Kevin Powell - Community•3mo ago

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•3mo 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•3mo ago

@Chris thank you!

Chris Bolson•3mo ago

Bear in mind that that solution uses :has() so might not work in some browers

swirlingblueberrysmoothie•3mo ago

right, thanks for pointing this out too! I will search for other solutions as well

ἔρως•3mo ago

why not write it as .map [data-region="..."]:hover { &, & >* { ...} }? you can even have a list and use @each for the values

Gaming

Programming

SCSS color elements from data-attr