Currently, I am in the process of implementing a straightforward Emoji-Rating system where 5 emojis are displayed on the screen and upon hovering over them, their appearance changes. This functionality is achieved using the :hover pseudo-class.
My goal is to make it so that when a user clicks on one of the emojis, it remains in its hovered state even after the cursor moves away. However, whenever I click on an emoji and move the cursor off, it reverts back to its original look.
Below is the ReactJs form code:
<form className='ratingForm' onSubmit={(event) => handleSubmit(event)}>
<div className='inputs'>
<div className='inputWrapper'>
<div id="angry-emoji-wrapper" className='emoji-wrapper angry'>
<EmojiAngry passedProp={getChildProps} value={0} />
</div>
<label className='inpLabel' htmlFor="0">Very Bad</label>
</div>
<div className='inputWrapper'>
<div id="frown-emoji-wrapper" className='emoji-wrapper frown'>
<EmojiFrown passedProp={getChildProps} value={1} />
</div>
<label className='inpLabel' htmlFor="1">Bad</label>
</div>
<div className='inputWrapper'>
<div id='neutral-emoji-wrapper' className='emoji-wrapper neutral'>
<EmojiNeutral passedProp={getChildProps} value={2} />
</div>
<label className='inpLabel' htmlFor="2">Average</label>
</div>
<div className='inputWrapper'>
<div id='smile-emoji-wrapper' className='emoji-wrapper smile'>
<EmojiSmile passedProp={getChildProps} value={3} />
</div>
<label className='inpLabel' htmlFor="3">Good</label>
</div>
<div className='inputWrapper'>
<div id='laughing-emoji-wrapper' className='emoji-wrapper laugh'>
<EmojiLaughing passedProp={getChildProps} value={4} />
</div>
<label className='inpLabel' htmlFor="4">Very Good</label>
</div>
</div>
<button className='btn btn-success' type="submit">Submit</button>
</form>
One of the Emoji components utilizing the react-icons npm package:
import { BsEmojiAngryFill } from 'react-icons/bs';
export default function EmojiAngry(props) {
function handleClick() {
props.passedProp(props.value);
}
return (
<BsEmojiAngryFill onClick={handleClick} />
)
}
Here is the CSS associated with the emojis:
/*==================================EMOJI===================================*/
svg {
width: 70px;
height: 50px;
color: rgb(201, 201, 201);
}
/*ANGRY*/
#angry-emoji-wrapper.emoji-wrapper.angry:hover>svg,
#angry-emoji-wrapper.emoji-wrapper.angry:focus>svg {
color: #de332b !important;
transform: scale(1.2) !important;
transition: all .1s ease-in-out !important;
cursor: pointer !important;
}
I have attempted to utilize tabIndex={0}, but this only resulted in an outline that fluctuated in size based on the current scale of the emoji.
I also experimented with various CSS approaches, such as not just separating hover and focus states with commas.
Furthermore, I explored employing the :active pseudo-class, but unfortunately, to no avail.