Div:hover仅在悬停文本时生效的导航栏样式问题

开发者阿泽

2026-8-14

问题原因分析

hover选择器错误：你写的.mapbox :hover带空格，实际是选中.mapbox下的子元素（也就是<a>标签）的hover状态，所以只有鼠标碰到文字才会变色，而非整个容器。正确写法是.mapbox:hover（无空格），表示选中.mapbox容器本身的hover状态。
样式冗余问题：之前必须重复所有样式是因为hover样式被加在了子元素上，子元素没有继承父容器的尺寸等样式，导致只改背景色时，只有文字区域变色。修正选择器后，hover状态作用在父容器上，只需要修改需要变化的属性（比如背景色）即可，其他样式会自动继承。

修正后的CSS代码

.map{
    font-family: 'Rubik Mono One', Arial;
    font-size: 1vw;
    color: white;
    text-decoration: none;
    text-shadow: 0.125vw 0.125vw #282b30;
}
.mapbox{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #424549;
    border-radius: 1vw;
    width: 12.5vw;
    height: 2vw;
    margin: auto;
    margin-bottom: 0.85vw;
    box-shadow: 0.225vw 0.225vw #1e2124;
}
/* 修正后的hover规则，仅修改背景色 */
.mapbox:hover{
    background-color: #7289da;
}