delegate hover states to CSS instead of javascript

[jonathanong]

i'm getting bugs with highlighting and mouse states, but i can't seem to figure out why (sucks because everything is disabled when i blur to inspect element). can we remove checking mouse states and delegate that to CSS? it will make it more difficult for implementors, but it'll be less buggy.

// Regular background
.select-option,
.select-options:hover .highlighted
  background-color: white

// Highlighted background
.highlighted,
.select-option:hover
  background-color: blue

this means that just hovering over an option won't select that option as highlighted in JS-land, but i don't think that should happen in the first place.

actually that won't even work. .select-option:hover needs higher specificity than .select-options:hover .highlighted. arghhh

[ianstormtaylor]

side note: i can usually get chrome to ignore me blurring by alt-tabing through an unrelated window (like a mail client) and then clicking directly into dev tools haha

[ianstormtaylor]

i think the hover is a good idea just for code complexity. that's how i handled it in https://github.com/segmentio/menu if i remember right. need a mouseover handler to remove any existing highlight js class too to not end up with double

[jonathanong]

side note: i can usually get chrome to ignore me blurring by alt-tabing through an unrelated window (like a mail client) and then clicking directly into dev tools haha

damn that didn't work for me!

[ianstormtaylor]

its an artform :p

[jonathanong]

need a mouseover handler to remove any existing highlight js class too to not end up with double

you can do that with CSS, but i think you'll have to use !important. meh