Build a component that changes the background color of a <div> when hovered over.
EasyProblem Statement
Build a component that changes the background color of a
when hovered over.
Sample Output
The <div> changes its background color to blue when hovered over.
Limits
Time: 2s · Memory: 256 MB
Code Editor
00:00
import React, { useState } from "react";
const HoverColor = () => {
const [bgColor, setBgColor] = useState("white");
return (
<div
style={{ backgroundColor: bgColor, width: "200px", height: "100px" }}
onMouseEnter={() => {
// Change the background color to blue
}}
onMouseLeave={() => {
// Reset the background color to white
}}
>
Hover over me!
</div>
);
};
export default HoverColor;
Expected Output
The <div> changes its background color to blue when hovered over.