如何在悬停时停止链接移动

Question

我有一个问题，我的某些链接在悬停时会不断移动几个像素，有谁知道解决方法。

目前我的代码是这样的

<a class="read-more-link" href="/what-to-do-now/week49/flowers-checklist/">See all Flowers jobs</a>

的CSS

    a:hover{
  border-bottom:1px solid #000;
}
a{
    color: #172D02;
    font-weight: bold;
    text-decoration: none;
}



.checklist .read-more-link:first-letter {
    text-transform: uppercase;
}

.checklist .read-more-link {
    clear: both;
    display: block;
    float: left;
    line-height: 1.1;
    text-transform: lowercase;
    background: url("/images/double_arrow.png") no-repeat scroll left center transparent;
    padding-left: 14px;
}

Answer 1

这是因为您已border-bottom开启hover。

因此，将1px鼠标悬停在链接下方时，会在链接下方添加边框。这会影响其他相关元素的位置。

将此更改为标准样式text-decoration:underline;或为其添加隐藏border-bottom：

a {
border-bottom:solid 1px transparent;
}