html - 悬停时更改边框底部特定区域的颜色

Question

我正在尝试重新创建可以在 http://math.stackexchange.com 的顶部链接中看到的效果.效果是下面有一些文本和一行，悬停在它下面的文本和行段都会改变颜色。

这是我拥有的:http://jsfiddle.net/4m7zc/我试着让底部边框重叠，但没有用。执行此操作的合适方法是什么？

HTML

<div class="top-links text-center">
<a href=# class="top-link">TEA </a>
&nbsp;&nbsp;|&nbsp;&nbsp; 
<a href=# class="top-link">COFFEE </a>
&nbsp;&nbsp;|&nbsp;&nbsp; 
<a href=# class="top-link">SODA </a>
&nbsp;&nbsp;|&nbsp;&nbsp; 
<a href=# class="top-link">ALCOHOL </a>
</div>

CSS

.top-links {
font-size:16px;
color: #b77b48;
border-bottom: 4.5px solid #db9356;

}

a.top-link {
color: #b77b48;
margin-bottom:0px;
padding-bottom:0px;
border-bottom: 4.5px solid #db9356;
}

a.top-link:hover {
color: red;
margin-bottom:0px;
padding-bottom:0px;
border-bottom: 4.5px solid red;
}

Answer 1

如果你想完全复制网站，你可以使用一个列表，在 ul 上设置了 text-align:center 然后是 display:inline-block 设置在每个 li 上。然后只需将鼠标悬停时的边框应用于任何链接，并通过边框宽度偏移它们的底部边距，这样它们就不会“弹出”到位。很简单!

Demo Fiddle

HTML

<ul>
    <li><a href='#'>Link</a> 
    </li>
    <li><a href='#'>Link</a> 
    </li>
    <li><a href='#'>Link</a> 
    </li>
</ul>

CSS

ul {
    list-style:none;
    text-align:center;
    border-bottom: 3px solid #000;
    margin:0;
    padding:0;
}
li:hover a {
    color: #d02027;
    border-bottom: 3px solid #d02027;
    margin-bottom:-3px;
}
a {
    font-size: 14px;
    color: #000;
    padding: 6px 12px 6px 12px;
    text-transform: uppercase;
    text-decoration: none;
    display: block;
}
li {
    padding: 0 5px;
    display: inline-block;
}