CSS中id元素:hover伪类设置背景图片不生效问题求助

问题原因 #

一共有两处错误导致hover样式不生效：

• CSS选择器的ID命名和HTML不匹配：HTML里两个按钮的ID分别是header_button_enregistrer、header_button_identifier，用下划线分隔命名，但你写的hover选择器用了中划线，变成了#header-button-enregistrer:hover、#header-button-identifier:hover，选择器找不到对应元素，样式自然不会生效。
• hover样式中background-image属性用法错误：background-image仅支持设置图片路径，你把no-repeat也写入了background-image的属性值，导致属性解析失败，样式无法生效。

解决方法 #

对应修改两处CSS代码即可：

1. 把hover选择器的ID修改为和HTML一致的下划线命名
2. 把hover里的background-image改成background简写属性，或者把no-repeat单独拆分为background-repeat属性

修正后的CSS代码片段 #

/* 注册按钮hover样式 */
#header_button_enregistrer:hover {
    background: no-repeat url(banner_button.png);
    background-position: -135px -39px;
}

/* 登录按钮hover样式 */
#header_button_identifier:hover {
    background: no-repeat url(banner_button1.png);
    background-position: 0px -39px;
}

额外优化提示：你代码里写的webkit-border-radius、moz-border-radius缺少前缀前的横杠，标准写法应为-webkit-border-radius、-moz-border-radius，如果不需要兼容非常旧的浏览器，也可以直接删除前缀写法，只用标准border-radius即可。

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