Question

我创建了一个div，可以向下滑动背景以显示生物图片。它使用100px宽x 200px高的背景，底部为方形灰色，顶部为方形图片。当您将鼠标悬停在它上方时，会向下移动背景以显示生物照片。

#bio-1 {
display: block;
width: 100px;
height: 100px;
background-color: #fff;
background-image: url(../images/kermit.jpg);
background-repeat: no-repeat;
background-position: bottom;
-webkit-transition:background-position 0.3s ease-in-out;  
-moz-transition:background-position 0.3s ease-in-out;  
-o-transition:background-position 0.3s ease-in-out;  
transition:background-position 0.3s ease-in-out; }

然后是悬停选项：

#bio-1:hover {
background-position: top; }

但是当我尝试更改文字颜色时，它会不断恢复到我在其所在段落上设置的标准灰色？所以这是在.content范围内.wrap ...但我想让它也能运作：

#bio-1 {
display: block;
width: 100px;
height: 100px;
color: #333;
background-color: #fff;
background-image: url(../images/kermit.jpg);
background-repeat: no-repeat;
background-position: bottom;
-webkit-transition:background-position 0.3s ease-in-out, color 0.3s ease-in-out;  
-moz-transition:background-position 0.3s ease-in-out, color 0.3s ease-in-out;  
-o-transition:background-position 0.3s ease-in-out, color 0.3s ease-in-out;  
transition:background-position 0.3s ease-in-out, color 0.3s ease-in-out; }

#bio-1:hover {
background-position: top;
color: #fff; }

但似乎忽略了文字颜色？我甚至尝试过！important标签......它仍然只显示文本为灰色？

我怎样才能让它改变文字颜色呢？它似乎并不想听这个特别的变化。我在IE，FF＆amp; CHROME。

Answer 1

尝试这样可以正常使用 DEMO HERE

#bio-1 {
   display: block;
    width: 100px;
    height: 100px;
    color: #333;
    background-color: #fff;
    background-image: url(../images/kermit.jpg);
    background-repeat: no-repeat;
    background-position: bottom;
    -webkit-transition: background-position .3s linear 0s, color 0.3s linear 0s;
    -moz-transition: background-position .3s linear 0s, color 0.3s linear 0s;
    -ms-transition: background-position .3s linear 0s, color 0.3s linear 0s;
    -o-transition: background-position .3s linear 0s, color 0.3s linear 0s;
    transition: background-position .3s linear 0s, color 0.3s linear 0s;
}

CSS3过渡：背景工作，文字不变色？

1 个答案: