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;
}

Answer 2

写

  a:hover{
      text-decoration:underline;
    }

in place of

    a:hover{
  border-bottom:1px solid #000;
}

并删除它，不需要它

.checklist a, .checklist a:visited {
    border-bottom: 0 none;
    position: relative;
}

Answer 3

您可以在顶部添加一个空容器，如下所示：

<div class="container" style="height:5px"></div>

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

3 个答案: