如何实现鼠标悬停div或其子元素时，二者样式同步变化？

你当前的CSS是两个独立的hover触发逻辑：

• 鼠标进入.about_us_table区域时，仅触发div自身的样式变化
• 鼠标仅在悬停到#about_us_table_p元素上时，才会触发段落文字变色
  这就导致鼠标停在div内的图片、表格间距等非段落区域时，段落不会变色，无法实现悬停div任意位置两者同步变样式的需求。

删除段落单独的hover规则，改用CSS后代选择器：当父级div触发hover状态时，同步控制内部段落的样式即可。由于DOM的事件冒泡机制，鼠标只要在div内部的任意子元素上，都会触发父div的:hover状态，刚好匹配你的需求。

修正后的完整CSS #

/* DIV基础样式 */
.about_us_table{
    box-shadow: 0px 0px 15px rgba(245, 244, 244, 0.8);
    margin: 0px auto;
    background-color: rgba(245, 244, 244, 1);
    width: 95%;
    border: 1px solid black;
    border-radius: 10px;
    transition: all 0.7s ease 0s;
}

/* DIV悬停样式 */
.about_us_table:hover{
    box-shadow: 0px 0px 30px rgba(139, 0, 0, 0.8);
    margin: 0px auto;
    background-color: rgba(139, 0, 0, 0.8);
    width: 95%;
    border: 1px solid;
    border-radius: 10px;
}

/* 段落基础样式 */
#about_us_table_p{
    color: rgba(0, 0, 0, 1);
    font-size: 23px;
    transition: all 0.7s ease 0s;
}

/* 核心规则：div悬停时内部段落同步变色 */
.about_us_table:hover #about_us_table_p{
    color: rgba(245, 244, 244, 0.8);
}

原有HTML代码不需要做任何调整，直接替换CSS即可。

修改后只要鼠标进入div的任意内部区域（图片、表格边距、段落、边框都算），div的阴影、背景样式和段落的文字颜色会同步变化，过渡动画也保持一致，不会出现触发不同步的问题。

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