React Hover样式

import React from 'react';
import './HoverExample.css';

function HoverExample() {
  return (
    <div className="hover-element">
      Hover over me!
    </div>
  );
}

export default HoverExample;

/* HoverExample.css */
.hover-element {
  padding: 10px;
  background-color: #f0f0f0;
  transition: background-color 0.3s ease;
}

.hover-element:hover {
  background-color: #d0d0d0;
}

import React, { useState } from 'react';
import './HoverExample.js.css';

function HoverExample() {
  const [isHovered, setIsHovered] = useState(false);

  return (
    <div
      className={`hover-element ${isHovered ? 'hovered' : ''}`}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      Hover over me!
    </div>
  );
}

export default HoverExample;

/* HoverExample.js.css */
.hover-element {
  padding: 10px;
  background-color: #f0f0f0;
  transition: background-color 0.3s ease;
}

.hover-element.hovered {
  background-color: #d0d0d0;
}