0

我创建了一个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 和 CHROME 中尝试过这个。

4

1 回答 1

1

试试这会很好的演示在这里

#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;
}
于 2013-09-14T12:24:44.937 回答