Kevin Powell - Community•12mo ago

Why is "~" not working?

This is the code: https://codepen.io/Bard-the-scripter/pen/zYeMELM I want to create a custom cursor and it works. but when I hover over a .btn or something else, I want to scale it or increase the width. The problem is that it doesnt work. In the developer tools I can't even see that bit of code being applied.

Bard

CodePen

Custom cursor

...

2 Replies

MarkBoots•12mo ago

~ is a subsequent-sibling selector. it will only work within the same parent and only for siblings that come after the current one. Your cursor is not in the same container as the buttons you could use :has() for it though

/* if the body has a button that is hovered, style the cursor */
body:has(button:hover) #cursor {
  width: 400px;
}

/* if the body has a button that is hovered, style the cursor */
body:has(button:hover) #cursor {
  width: 400px;
}

the browser support for :has() is getting better, but if you really want to be sure, you'll have to use js.

BardacoonOP•12mo ago

Didn't think about that Thanks

Gaming

Programming

Why is "~" not working?