Recently delving into the world of react, I set out to create a basic website featuring music notes (represented by simple images) that would change color upon hovering over them. While aware of the traditional :hover method, I decided to challenge myself and practice using useState instead. After much trial and error, I was able to implement the toggle effect successfully for changing colors on hover. However, during this process, I encountered an unexpected issue with the width being disrupted. Although all other CSS properties like position and color are functioning as intended, the width remains unchanged from its original state. Currently, only note3 has the toggle feature applied since it was the note I focused on testing.
The following code snippet is a segment from my index.js file showcasing the specific music note in question.
const Body = () => {
const [isNote3, setNote3] = useState("true");
const ToggleNote3 = () =>{
setNote3(!isNote3);
}
const [isB1, setB1] = useState("true");
const ToggleB1 = () =>{
setB1(!isB1);
}
return (
<div>
<div className="sheetmusic">
<img className="sheet" src={sheetmusic} />
</div>
<div className="notes">
<div className={isNote3 ? "note3" : "n3"}>
<img onMouseEnter={ToggleNote3 } src={note1} />
</div>
</div>
</div>
)
}The subsequent snippet presents the pertinent CSS styles corresponding to note3.
.n3{
filter: invert(100%) sepia(26%) saturate(5791%) hue-rotate(58deg) brightness(116%) contrast(101%);
left: 25%;
position: absolute;
max-width: 8%;
max-height: auto;
top: 30%;
}
.note3 {
position: absolute;
left: 25%;
max-width: 8%;
max-height: auto;
top: 30%;
}
Moreover, a visual representation of the current status on my webpage can be viewed here (the larger note currently toggles). 3
I've spent time experimenting with different approaches but have not been able to pinpoint the root cause of the problem. Any assistance or insight would be immensely appreciated. Thank you in advance.