Why does click work but hover doesn't?

Here's the code I'm having an issue with one.addEventListener('click', () => { if (one.hasAttribute('checked')) { one.style.backgroundColor = 'green' two.style.backgroundColor = 'rgba(211, 211, 211, 0.9)' three.style.backgroundColor = 'rgba(211, 211, 211, 0.9)' four.style.backgroundColor = 'rgba(211, 211, 211, 0.9)' five.style.backgroundColor = 'rgba(211, 211, 211, 0.9)' } }) one.addEventListener('mouseenter', () => { one.style.backgroundColor = 'green' two.style.backgroundColor = 'rgba(211, 211, 211, 0.9)' three.style.backgroundColor = 'rgba(211, 211, 211, 0.9)' four.style.backgroundColor = 'rgba(211, 211, 211, 0.9)' five.style.backgroundColor = 'rgba(211, 211, 211, 0.9)' }) one.addEventListener('mouseleave', () => { one.style.backgroundColor = 'rgba(211, 211, 211, 0.9)' two.style.backgroundColor = 'rgba(211, 211, 211, 0.9)' three.style.backgroundColor = 'rgba(211, 211, 211, 0.9)' four.style.backgroundColor = 'rgba(211, 211, 211, 0.9)' five.style.backgroundColor = 'rgba(211, 211, 211, 0.9)' })
8 Replies
HaCT
HaCT9mo ago
does the function trigger when you hover the mouse :?
Mannix
Mannix9mo ago
do you have any errors in the console??
Rägnar O'ock
Rägnar O'ock9mo ago
If all you want to do in this listener is changing style depending on hover and click state, you should use CSS instead of JS And to help people help you you should provide your code in a codepen where we can see and interact with the code. With just the snippet you've given the issue could be that one, two, three, four and five are not defined Or it could be anything else, it's hard to tell with just that snippet
ἔρως
ἔρως9mo ago
yeah, re-write this with css
Stan Long
Stan Long9mo ago
@HaCT the function does trigger when I hover or when I click. But for some reason I can't get the button to stay a certain color after being clicked and change to a different color when being hovered over. What I'm trying to replicate is a yelp review interaction. Where when I hover over one star, it would be one color, when I clicked on the first star, it would stay yellow. But when I hover over star two, it would change to a different color, and same thing would happen to the other five stars How do I codepen code?
ἔρως
ἔρως9mo ago
you go to codepen.io everything else should be self explanatory
MarkBoots
MarkBoots9mo ago
with radiobuttons and css you can do something like this this https://codepen.io/MarkBoots/pen/KKEYxOz
No description
Stan Long
Stan Long9mo ago
The CSS version of what you have seems a lot more simple then my JS sheet, but can you check oh the hover and click I have in the JS file, and can that be replicated on CSS?
Want results from more Discord servers?
Add your server