如何停止链接移动悬停

我有一个问题，我的一些链接不断移动几个像素悬停没有人知道这个问题的解决办法。如何停止链接移动悬停

目前我的代码是这样的

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

来源

2011-12-02 NiseNise

这是因为您的border-bottom设置为hover。

因此，这是当您的链接悬停时添加一个1px边界下的链接。这可能会影响其他相关元素的位置。

更改为text-decoration:underline;或添加一个隐藏border-bottom的标准样式：

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

来源

2011-12-02 10:50:59 Curt

我需要它，因为设置边框颜色不同于文字链接 – NiseNise

在这种情况下，添加'border-bottom：solid 1px transparent;'为您的'a'样式 – Curt

嗯，这个便士已经掉了，像一个治疗感谢:) – NiseNise

写

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

来源

2011-12-02 10:50:14

-1

您可以添加一个空容器像下面，在上面：

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

来源

2015-06-26 08:36:10 Neeraj

如何停止链接移动悬停

回答

相关问题