悬停边框位置

Question

在下面的代码中，我已经设置了ul的底部边框。当鼠标悬停在ul中的项目上时，我希望显示悬停项目的底部边框正好在ul边框上。我无法设置两个边框（ul和ul项目）的位置，使它们在悬停时彼此重叠。

我尝试使用绝对定位和行高，但没有取得太大的成功。

这就是我想要的效果：

HTML代码如下：

<div class="box">
    <ul>
        <li><a href="#">test 1</a></li>
        <li><a href="#">test 2</a></li>
    </ul>
</div>

CSS:

ul{
    list-style: none;
    padding: 0 0 10px;
    margin: 0;
    border-bottom: 5px solid green;
    overflow: hidden;
}

ul li{
    float: left;
    margin-left: 20px;
}

a{
    text-decoration: none;
    display: block;     
}

a:hover{
    border-bottom: 5px solid red;    
}

Demo: http://jsfiddle.net/nNvfy/

- user3761459

Answer 1

您想要定位您的ul和li - 把子li底部的偏移量设置为边框的宽度，同时将其设置为transparent，然后使用li:hover事件/选择器将边框颜色设置为红色。

演示 Fiddle

使用以下CSS：

ul {
    list-style: none;
    margin: 0;
    border-bottom: 5px solid green;
    position:relative;
    padding:0;
}
ul li {
    padding:10px 10px;
    margin-left: 20px;
    display:inline-block;
    position:relative;
    bottom:-5px; /* <-- offset bottom of li by border width so it overlaps ul green border */
    border-bottom: 5px solid transparent; /* add border, make transparent so it doesnt 'jump' on hover */
}
a {
    text-decoration: none;
    display: block;
}
li:hover {
    border-color:red; /* <-- use the li hover event (not a hover) to color the border */
}

- SW4

---

几秒钟内的绝妙解决方案。 - Manwal

这可能也是我会做的方式，但我仍然想知道是否有更好的解决方案（例如，不需要显式设置高度）。 - webketje

太棒了，我也尝试过，但是没能让红色边框显示在绿色边框上。完美 :) - webketje

@labtoy - 不是故意的，我没有看这个帖子，只是直接回复Tyblitz。对于任何冒犯之处，我表示歉意，我不是为了声誉而来（几千次后你甚至都不会注意到它），事实上- 在那个更改之后，只有一个额外的投票被投在这个答案上，而且那是一个反对票。请注意，原始答案同样有效，并吸引了积极的关注。 - SW4

@SW4 是的，我给你点了踩，因为你对代码进行了相当大的修改。不过，问题已经得到解答并且有一个被接受的答案。没有什么损失。 - labtoy

Answer 2

这是一个可运行的版本： http://jsfiddle.net/hKVp6/

该链接提供了一个可以运行的代码示例。

ul{
    width: 100%;
    float: left;
    list-style: none;   
    margin: 0;
    border-bottom: 5px solid green;
}

li{
    float: left;
    margin-left: 20px;
    padding: 0 0 10px;
}

li:hover {
    border-bottom: 5px solid red; 
    margin-bottom: -5px; /* same as bottom border */    
}

li a{
    text-decoration: none;
    display: block;     
}

- labtoy

Answer 3

稍有迟到，但这里提供一种方案，不使用负值且使用 位置。基本上只使用了 背景颜色：

.box{
    background:green;
    padding-bottom:5px;
}

ul{
    list-style:none;
    margin:0;
    padding:0 0 0 10px;
    background:white;
}

ul li{
    display:inline-block;
    vertical-align:top;
    margin-left: 20px;
}

ul li a{
    background:white;
}

li a:hover{
    border-bottom:5px solid red;
}

JSFiddle

- Vucko

Answer 4

你可以试试这样写： DEMO

CSS:

ul {
    list-style: none;
    padding: 0 0 0px;
    margin: 0px;
    border-bottom: 5px solid green;   
    position:absolute;
    width:100%;
}
ul li {
    float: left;
    margin-left: 20px;
    border-bottom: 5px solid transparent;
    margin-bottom:-5px;
    z-index:999;
}
a {
    text-decoration: none;
    display: block;
}
ul li:hover {
    z-index:9999;
    border-bottom: 5px solid red;
}

- G.L.P

Answer 5

在鼠标悬停时，添加 5像素 的透明 边框 并将其变为红色。尝试下面的代码：

<div class="box">
    <ul class="clearfix">
        <li><a href="#">test 1</a></li>
        <li><a href="#">test 2</a></li>
    </ul>
</div>

.clearfix:before,
.clearfix:after{
    display: table;
    content: "";
    line-height: 0;
}
.clearfix:after{
    clear: both;
}

ul{
    list-style: none;
    padding: 0;
    margin: 0;
    border-bottom: 5px solid green; 
}

ul li{
    float: left;
    margin-left: 20px;
    padding: 0 0 10px;
    border-bottom: 5px solid transparent;
    margin-bottom: -5px;
}

a{
    text-decoration: none;
    display: block;    
}

li:hover{    
   border-color: red;
}

检查这个DEMO：

- amol

Answer 6

我有一个解决方案的变通方法。只需不要将边框设置为 ul，而是插入一个带有边框的 div 元素。这样你就不会依赖于列表了。

DEMO Fiddle

HTML：

<div class="box">
    <ul>
        <li><a href="#">test 1</a></li>
        <li><a href="#">test 2</a></li>
    </ul>
    <div id="border"></div>
</div>

CSS：

.box {
    width: 500px
}
#border {
    width: 100%
    position: absoulte;
    margin-top: -15px;
    border-bottom: 5px solid green;
}
ul{
    list-style: none;
    padding: 0 0 10px;
    margin: 0;
    overflow: hidden;
}

ul li{
    float: left;
    margin-left: 20px;
    border-bottom: 5px solid green;
}
ul li:hover {
     border-bottom: 5px solid red;
}

a{
    text-decoration: none;
    display: block;     
}

- ohboy21