在样式 jsx 中包含悬停 - Javascript

在 React 应用程序中，悬停效果是一种常见的 UI 特效。由于 CSS 3 并不支持在 JSX 中嵌入类似 :hover 这样的伪类选择器，因此我们需要使用 JavaScript 来创建悬停效果。

实现悬停效果的方式

React 中实现悬停效果有多种方式，以下是其中两种实现方式：

1. 使用 state 存储悬停状态

具体实现是在元素的 props 中添加一个 onMouseEnter 和一个 onMouseLeave 属性，这两个属性分别控制元素的悬停状态。如果元素处于悬停状态，就可以改变元素的样式，例如改变元素的背景色。

import React, { useState } from 'react';

const HoverableElement = () => {
  const [isHovered, setHovered] = useState(false);

  const handleMouseEnter = () => {
    setHovered(true);
  };

  const handleMouseLeave = () => {
    setHovered(false);
  };

  return (
    <div
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
      style={{
        backgroundColor: isHovered ? 'red' : 'blue',
      }}
    >
      Hover Me!
    </div>
  );
};

export default HoverableElement;

2. 使用 CSS 类来实现悬停状态

具体实现是在元素的 props 中添加一个 className 属性，并设置一个包含悬停样式的 CSS 类。例如，当鼠标悬停在元素上时，我们将 hovered 类添加到元素的类名中。

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

const HoverableElement = () => {
  return (
    <div className="element">
      Hover Me!
    </div>
  );
};

export default HoverableElement;

.element {
  background-color: blue;
}

.element:hover {
  background-color: red;
}

结论

以上两种实现方式都可以轻松实现悬停效果。使用 state 存储悬停状态的方式可读性更高，但当同一页面中出现多个需要悬停效果的元素时会变得复杂。使用 CSS 类实现悬停状态的方式更为简洁，但可读性较低。因此，具体实现方式应根据具体情况而定。