悬停时忽略背景位置样式

Question

我需要一个班级来改变悬停时的背景位置。我做错了什么？

CSS：

#id1 { background: url(id1.png); }
#id2 { background: url(id2.png); }
.myClass:hover { background-position: bottom; color: yellow; }

HTML：

<div id="id1" class="myClass">First</div>
<div id="id2" class="myClass">Second</div>

这是关于小提琴的一个例子：http://jsfiddle.net/Zkfq6/

如您所见，文本颜色变为黄色，但背景位置被忽略。

Answer 1

background速记属性会影响background-image 和 background-position等。如果未指定，则速记会为位置设置默认值，因此前两个带ID的规则将扩展为以下内容：

#id1 { background: url(id1.png) left top /* color, attachment, etc */; }
#id2 { background: url(id2.png) left top /* color, attachment, etc */; }

您的前两个规则比您的类+伪类更具体，因此它们的默认background-position始终优先。

由于您指定的所有内容都是背景图片的网址，因此最简单的解决方法是在前两个规则中使用background-image而不是background，这样background-position就不会隐含设置因此不一定会覆盖你的第三条规则：

#id1 { background-image: url(id1.png); }
#id2 { background-image: url(id2.png); }

jsFiddle demo

Answer 2

更改为以下内容：

.myClass:hover { background-position: bottom !important; color: yellow; }

为ID定义的样式具有优先权，相对于 background-position ，这将优先于.myClass。