React项目中如何实现悬停父Div时显示隐藏的子Div？

问题出在你用的~选择器上——它是兄弟选择器，只能选中和当前元素同级的兄弟元素，但你的子div是父div的后代（子元素），所以这个选择器完全不适用。

正确的做法是用后代选择器（或子选择器>），直接在父元素hover状态下选中其子元素：

示例代码 #

React组件（JSX）

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

const YourComponent = () => {
  return (
    <div className="parent-container">
      <div className="child-text">这是要显示的文本</div>
    </div>
  );
};

export default YourComponent;

CSS样式

/* 父容器样式，带背景图 */
.parent-container {
  width: 300px;
  height: 200px;
  background-image: url('你的背景图路径');
  background-size: cover;
  position: relative; /* 如需子元素定位可添加 */
}

/* 子元素默认隐藏 */
.child-text {
  display: none;
  color: white;
  padding: 10px;
  background-color: rgba(0,0,0,0.7);
}

/* 父元素hover时显示子元素 */
.parent-container:hover .child-text {
  display: block; /* 可根据需求换成inline-block等 */
}

补充说明 #

• 如果子元素是父元素的直接子元素，也可以用子选择器>，写法是.parent-container:hover > .child-text，效果和后代选择器一致，但只会选中直接子元素，不会匹配更深层的后代。
• 若项目使用CSS Modules，只需确保类名正确引入，选择器逻辑完全不变。

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