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
does the function trigger when you hover the mouse :?
do you have any errors in the console??
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
yeah, re-write this with css
@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?
you go to codepen.io
everything else should be self explanatory
with radiobuttons and css you can do something like this this
https://codepen.io/MarkBoots/pen/KKEYxOz
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?