0

div背景を下にスライドさせてバイオ画像を表示する を作成しました。幅 100 ピクセル x 高さ 200 ピクセルの背景を使用し、下の正方形はグレー、上の正方形は画像です。カーソルを合わせると、背景が下に移動してバイオ写真が表示されます。

#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

試してみてください これは正常に動作します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;
}
于 2013-09-14T12:24:44.937 に答える