首页 文章

CSS悬停抖动 - 背景颜色

提问于
浏览 次
0

如果您将鼠标悬停在“x”的角落，您将从更改背景颜色的悬停效果中获得抖动 .

我查看了 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>
html css

2 回答

  • 0

    它看起来好像你的 Span 大小12px不能（非常）适合12px的字体大小 . 我只是运行了一个代码的jsfiddle，使宽度和高度等于14px，无法重现抖动 . 而我可以用原始大小12px重现它 .

    回复于
  • 1

    只需从 transition 删除 background-color ：

    .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>
    回复于

相关问题