CSS hover效果异常求助：需仅hover元素本身时触发效果

我明白你的问题了——现在#number元素的hover效果会在鼠标悬停到它的整个横向区域（包括数字左右的空白）时触发，这是因为默认的块级元素特性导致的。下面是两种简单的修复方案：

方案一：将#number改为行内块元素 #

把#number的display设置为inline-block，这样它的宽度只会包裹数字内容，而不是占满父容器的整个宽度。同时父容器的text-align: center依然会让它保持居中：

#number { 
    font-size: 40px; 
    transition: 0.3s; 
    padding: 0px; 
    margin: 55px 0px 20px 0px; 
    box-sizing: border-box; /* 修正你原来错误的box-sizing值 */
    text-align: center; 
    display: inline-block; /* 添加这一行 */
}
#number:hover { color: #607D8B; }

方案二：用<span>包裹数字文字 #

如果不想改变#number的块级特性，可以在数字外面套一个<span>，然后给这个<span>添加hover效果，这样只有鼠标真正悬停在文字上时才会触发颜色变化：

修改后的HTML： #

<div id="number"><span>0</span></div>

修改后的CSS： #

#number { 
    font-size: 40px; 
    padding: 0px; 
    margin: 55px 0px 20px 0px; 
    box-sizing: border-box;
    text-align: center; 
}
#number span { 
    transition: 0.3s; /* 把过渡效果移到span上 */
}
#number span:hover { 
    color: #607D8B; 
}

问题原因解释 #

原来的#number是<div>元素，默认是块级元素，会自动占据父容器的整个宽度（这里是300px）。所以即使你鼠标悬停在数字左右的空白区域，其实依然是在#number元素的范围内，自然会触发hover效果。上面的两种方案都是让可hover区域缩小到数字文字本身，从而解决问题。

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