Question

如果将鼠标悬停在“ x”的一角，则会因更改背景颜色的：hover效果而产生抖动。

我研究了pseudo解决方案，但没有找到任何有关背景转换的信息。

任何人都可以在不创建额外标记的情况下解决抖动问题吗？

.feed__btn {
    display: flex;
    width: 12px;
    height: 12px;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 50%;
    color: #6f6f90;
    font-size: 12px;
    position: absolute;
    cursor: pointer;
    transition: background-color 0.25s;
}
.feed__btn:hover {
    color: white;
    font-size: 6px;
        background-color: #e05e7f;
}

<span class="rmTag feed__btn feed__btn--unfollow">×</span>

Answer 1

在我看来，您的12px跨度大小（不能）完全适合12px的字体大小。我只是对您的代码运行了jsfiddle，使宽度和高度等于14px，并且无法重现抖动。而我可以用12px的原始大小复制它。

Answer 2

只需从background-color中删除transition：

.feed__btn {
    display: flex;
    width: 12px;
    height: 12px;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 50%;
    color: #6f6f90;
    font-size: 12px;
    position: absolute;
    cursor: pointer;
    transition: /* background-color */ 0.25s;
}
.feed__btn:hover {
    color: white;
    font-size: 6px;
        background-color: #e05e7f;
}

<span class="rmTag feed__btn feed__btn--unfollow">×</span>

CSS悬停抖动-背景颜色

2 个答案: