当动画增加大小时，背景不会向框的左侧延伸 100%

Posted 2023-05-08

【中文标题】当动画增加大小时，背景不会向框的左侧延伸 100%

【英文标题】：Background will not extend 100% to left of box when it is animated to increase in size

【发布时间】：2016-02-06 18:22:59

【问题描述】：

我试图让一个框扩大尺寸，同时让文本居中。我的问题是：当盒子展开时，我在盒子标题部分使用的背景不会向左延伸 100%。

我认为这可能与以下代码有关，在“悬停模式”中，我将左侧和顶部的边距设置为 -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% 即可使文本相对于框的中间向左移动（当它已展开时）。

【问题讨论】：

顺便说一句，background-color:none 是一个错误。你的意思是background-color:transparent。

【参考方案1】：

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

将宽度更改为 100%。这将导致它在悬停时完全向左延伸。

【讨论】：

@urnostam 此解决方案的唯一问题是文本随后相对于框向左移动。如果您查看我发布的原始小提琴，则文本位于中间。

【参考方案2】：

将width:290px; 替换为width:100%;。并删除#textArea和#headingArea的width

Jsfiddle

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

【讨论】：

此解决方案的唯一问题是文本随后相对于框向左移动。如果您查看我发布的原始小提琴，则文本位于中间。

@JonnyBoy 请再次检查上面的链接。

@JonnyBoy 有帮助吗？

差不多。唯一的问题是当框变大时文本会重新格式化 - 我已经编辑了你的小提琴以显示这一点：jsfiddle.net/L9oohws1/13。看看“katirpied”是如何改变台词的......无论如何要阻止这个？

就是这样。你是怎么做到的？