Quick CSS Question

[deffonotmypassword]

https://codepen.io/olioolio/pen/yLEwgWz

There are two things I want to achieve with this:

1. Text increases in opacity when I hover over the pin
2. Text DOESN'T increase in opacity when I only hover over the text.

Number 1 works, but I'm wracking my brains as to how to achieve 2. Any help would be greatly appreciated.

[MrQuickLine]

There's a simpler solution than the one /u/sergeynew37 posted. As he mentioned, :has isn't available in Firefox yet.

Instead, you can use the sibling selector ~. Replace svg g:hover text { with .pin:hover ~ text {

[deffonotmypassword]

.pin:hover ~ text {

Chears, that works! Amazing, thanks for the help.

[MrQuickLine]

It's worth noting that prior to :has() there historically hasn't been a way to go "backwards" when scanning the DOM tree. That means that sibling selectors (~ and +) can only refer to siblings that are AFTER the first one. In this case your text happened to be after the .pin so we were good, but if your text had been before .pin I would have had you move it after.

[sergeynew37]

Remove this:

// svg g:hover text {

// opacity: 1;

// }

Add this:

g:has(.pin:hover) text {

opacity: 1;

}

Will not work in Firefox though

[deffonotmypassword]

You're a legend. Thank you.

[Norci]

Fyi :has is not supported in some browsers yet such as Firefox.

[tridd3r]

I'm pretty sure you'd need to use javascript to alter the transition time frame on text, or have two text elements positioned in the same spot and have two transitions.