當動畫增加尺寸時，背景不會延伸到框的左側100％

我試圖讓一個框在擴大尺寸的同時使文字居中。我的問題是：當方框展開時，我在框的標題部分使用的背景不會向左延伸100％。當動畫增加尺寸時，背景不會延伸到框的左側100％

我認爲這可能與下面的代碼有關，在'懸停模式'中，我已經將margin設置爲-5px，這樣框就從中間展開（這是因爲寬度和高度擴展了10px ）：

.serviceBox1 { 
     width:290px; 
     height:282px; 
     position:absolute; 
     margin: 0px; 
     overflow: hidden ; 
     } 

      .serviceBox1Hover { 
       width:300px; 
       height:292px; 
       margin-left: -5px; 
       margin-top: -5px; 
       }

見的代碼休息以下，和實施例：

https://jsfiddle.net/L9oohws1/

鈮解決方案必須確保文本在放大時保留在盒子的中間，如同上面的提琴一樣。只需將寬度更改爲100％，文本就會相對於框的中間向左移動（當它展開時）。

來源

2015-11-05 JonnyBoy

順便提一下，width'背景色：none'是錯誤的。你的意思是「背景色：透明的」。 –

將width:290px;替換爲width:100%;。並刪除#textArea和#headingArea

Jsfiddle

.serviceBox1Text { 
    width: 100%; 
    margin: 0 auto; 
}

來源

2015-11-05 19:07:52 Alex

此解決方案的唯一問題是文本然後相對於框向左移動。如果你看看我發佈的原版小提琴，那麼文字就停留在中間。 – JonnyBoy

@JonnyBoy請再次檢查上面的鏈接。 – Alex

@JonnyBoy對您有幫助嗎？ – Alex

 .serviceBox1Text { 
      width:100%; 
      margin: 0 auto; 
     }

將寬度更改爲100％。這將導致它在懸停時完全向左延伸。

來源

2015-11-05 19:06:30 urnotsam

@urnostam此解決方案的唯一問題是文本然後相對於框向左移動。如果你看看我發佈的原版小提琴，那麼文字就停留在中間。 – JonnyBoy

當動畫增加尺寸時，背景不會延伸到框的左側100％

回答

相關問題