Question

我有一系列项目，将它们悬停时会更改border和box-shadow属性。但是，在过渡期间，页面上和容器内的文本都会移动以适应过渡。我正在努力寻找一种方法来阻止这种情况的发生：

<div class="faq-container">
    <div class="faq-content">
        <span class="faq-icon"><i class="fas fa-external-link-alt"></i></span>
        <div>
            <a data-modal="#modal1" class="modal-link">Question 1?</a>
        </div>
    </div>
</div>

CSS：

.faq-container {
    width: 100%;
    padding: 15px;
    border: 1px solid #dedede;
}

.faq-container:hover {
    border: 4px solid #0052e7;
    transition: 0.2s ease all;
    cursor: pointer;
}

.faq-container>div a {
    text-decoration: none;
    font-size: 24px;
    font-weight: bold;
    color: #000;
}

.faq-icon {
    float: right;
    font-size: 28px;
    font-weight: bold;
    color: #aaa;
}

Answer 1

您要添加边框，这意味着一切都必须转移以适应边框中添加的像素。

选项1 将border-color属性从透明转换为颜色。而不是过渡边框宽度。

选项＃2 绝对定位要获得边框的元素，以便将其从DOM流中删除，并且在通过更改边框增加大小时不能“移动”。

选项3 在带有边框颜色的文本容器之后创建另一个元素，然后在悬停时缩放该元素，以使边框看起来像扩展，但实际上是内容缩放背后的东西，因此没有任何动静。

停止CSS转移文字

1 个答案: