React项目卡片全局hover效果问题：悬停卡片触发所有子元素样式

问题根源 #

你当前的CSS规则里，子元素（h3、h4、p等）的样式变化仅在鼠标直接悬停在子元素本身时才触发，而非悬停整个卡片时同步生效。要实现鼠标触碰到.data-card区域就触发所有子元素的hover状态，需要把子元素的样式规则绑定到父元素的hover事件上。

修改后的完整CSS代码 #

.page-contain {
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  background: #e7f3f1;
  border: 0.75em solid white;
  padding: 2em;
  font-family: "Open Sans", sans-serif;
}

.data-card {
  display: flex;
  flex-direction: column;
  max-width: 20.75em;
  min-height: 20.75em;
  overflow: hidden;
  border-radius: 0.5em;
  text-decoration: none;
  background: white;
  margin: 1em;
  padding: 2.75em 2.5em;
  box-shadow: 0 1.5em 2.5em -0.5em rgba(0, 0, 0, 0.1);
  transition: transform 0.45s ease, background 0.45s ease;
}
.data-card h3 {
  color: #2e3c40;
  font-size: 3.5em;
  font-weight: 600;
  line-height: 1;
  padding-bottom: 0.5em;
  margin: 0 0 0.142857143em;
  border-bottom: 2px solid #753bbd;
  transition: color 0.45s ease, border 0.45s ease;
}
.data-card h4 {
  color: #627084;
  text-transform: uppercase;
  font-size: 1.125em;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.1em;
  margin: 0 0 1.777777778em;
  transition: color 0.45s ease;
}

.data-card p {
  opacity: 0;
  color: #ffffff;
  font-weight: 600;
  line-height: 1.8;
  margin: 0 0 1.25em;
  transform: translateY(-1em);
  transition: opacity 0.45s ease, transform 0.5s ease-in;
}

.data-card .link-text {
  display: block;
  color: #753bbd;
  font-size: 1.125em;
  font-weight: 600;
  line-height: 1.2;
  margin: auto 0 0;
  transition: color 0.45s ease-in;
}

/* 核心修改：父元素hover时触发所有子元素样式变化 */
.data-card:hover {
  background: #753bbd;
  transform: scale(1.02);
}

.data-card:hover h3 {
  color: #ffffff;
  border-bottom-color: #a754c4;
}

.data-card:hover h4 {
  color: #ffffff;
}

.data-card:hover p {
  opacity: 1;
  transform: none;
}

.data-card:hover .link-text {
  color: #ffffff;
}

关键调整说明 #

1. 选择器逻辑修改：把原来的.data-card h3:hover改为.data-card:hover h3——意思是当.data-card被hover时，内部的h3元素立即应用样式，同理修改h4、p、.link-text的规则。
2. 修复语法错误：原代码中box-shadow的rgba(#000000, 0.1)在普通CSS中不生效，改为标准写法rgba(0, 0, 0, 0.1)。

修改后，只要鼠标进入.data-card的任何区域，卡片本身和所有子元素都会同步触发hover状态，完全符合你的需求。

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