React实现鼠标悬停文章时右侧弹出View按钮的方案

方法一：纯CSS实现（推荐） #

无需额外状态管理，通过CSS伪类直接控制按钮显示，代码简洁高效。

组件代码 #

import './ArticleList.css';

const ArticleList = ({ articles }) => {
  return (
    <div className="article-list">
      {articles.map((article) => (
        <div key={article.id} className="article-item">
          <div className="article-content">
            <h3>{article.title}</h3>
            <p>{article.excerpt}</p>
          </div>
          <button className="view-btn">View</button>
        </div>
      ))}
    </div>
  );
};

export default ArticleList;

样式文件（ArticleList.css） #

.article-list {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.article-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  border: 1px solid #eee;
  border-radius: 8px;
  margin-bottom: 1rem;
  transition: all 0.3s ease;
}

.article-content {
  flex: 1;
}

.view-btn {
  opacity: 0;
  visibility: hidden;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  background-color: #007bff;
  color: white;
  cursor: pointer;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.article-item:hover .view-btn {
  opacity: 1;
  visibility: visible;
}

核心逻辑：利用.article-item:hover .view-btn选择器，在父元素被悬停时，让按钮从透明不可见状态切换为可见状态，搭配过渡动画提升交互流畅度。

方法二：React状态控制实现 #

如果需要在悬停时执行额外逻辑（比如请求数据、修改状态），可以用状态维护当前悬停的文章ID：

import { useState } from 'react';

const ArticleList = ({ articles }) => {
  const [hoveredId, setHoveredId] = useState(null);

  return (
    <div style={{ width: '100%', maxWidth: '800px', margin: '0 auto' }}>
      {articles.map((article) => (
        <div
          key={article.id}
          style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between',
            padding: '1rem',
            border: '1px solid #eee',
            borderRadius: '8px',
            marginBottom: '1rem'
          }}
          onMouseEnter={() => setHoveredId(article.id)}
          onMouseLeave={() => setHoveredId(null)}
        >
          <div style={{ flex: 1 }}>
            <h3>{article.title}</h3>
            <p>{article.excerpt}</p>
          </div>
          <button
            style={{
              opacity: hoveredId === article.id ? 1 : 0,
              visibility: hoveredId === article.id ? 'visible' : 'hidden',
              padding: '0.5rem 1rem',
              border: 'none',
              borderRadius: '4px',
              backgroundColor: '#007bff',
              color: 'white',
              cursor: 'pointer',
              transition: 'opacity 0.3s ease, visibility 0.3s ease'
            }}
          >
            View
          </button>
        </div>
      ))}
    </div>
  );
};

export default ArticleList;

核心逻辑：用hoveredId记录当前悬停的文章ID，通过onMouseEnter和onMouseLeave事件更新状态，再根据状态控制按钮的显示隐藏。

内容的提问来源于stack exchange，提问作者Shivam Pandey