0

css3 アニメーションを作成したところ、問題が発生しました。テキストにカーソルを合わせると、上に行が表示され、すべてがうまくいくはずですが、この行をテキストの下部に移動する方法がわかりません。transform:translateX を試してみましたが、役に立ちません。

私のコードがあります：

.line
{
font-family:Tahoma;
width:0px;
height:1px;
background:black;
transition:width 0.4s ease ;
-moz-transition: 0.4s ease ; /* Firefox 4 */
-webkit-transition: 0.4s ease ; /* Safari and Chrome */
-o-transition: 0.4s ease; /* Opera */

}

div:hover

{

width:85px;

}

http://jsfiddle.net/DashDesign/SD58Z/ 1

4

1 に答える 1

1

内側の div を 1 ピクセル上に移動し、不透明な背景を指定して、親 div から高さの制限を取り除きます。

.line div{
    background:#fff;
    position:relative;
    bottom:1px;
}

例

于 2013-03-19T07:59:59.500 に答える