边境底部需要在悬停时向上移动

Question

我想要一个在悬停时向上移动的边框（看起来像下划线）。

所以，如果这是一个链接：

LINK

然后，如果我将鼠标悬停在它上面

LINK
＆＃34;＆＃34;＆＃34;＆＃34;

网站示例： http://matthias-schoenaerts.com/ （导航栏）

我希望它尽可能简单。

这就是我提出的： http://jsfiddle.net/Lxxqz3pL/

HTML：

<ul id="nav">
  <li><a href="#">About Us</a></li>
  <li><a href="#">Our Products</a></li>
  <li><a href="#">FAQs</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">Login</a></li>
</ul>

CSS：

/* Begin Navigation Bar Styling */
#nav {
width: 100%;
float: center;
margin: 0 0 3em 0;
left: 0;
padding: 0;
list-style: none;
background-color: #333333;
border-bottom: 1px solid #ccc; 
border-top: 1px solid #ccc; 
position: absolute;
}

#nav li {
float: left; 
}

#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #a3a3a3;
}

#nav li a:hover {
transition: border .5s ease-in;
background-color: #fff; 
border-bottom: 3px solid red;
}
/* End navigation bar styling. */

Answer 1

这是updated CSS，你想要的是什么？

/* Begin Navigation Bar Styling */
#nav {
    width: 100%;
    float: center;
    margin: 0 0 3em 0;
    left: 0;
    padding: 0;
    list-style: none;
    background-color: #333333;
    border-bottom: 1px solid #ccc; 
    border-top: 1px solid #ccc; 
    position: absolute;
    overflow: hidden;
    }
#nav li {
    float: left; 
    }
#nav li a {
    display: block;
    padding: 8px 15px;
    text-decoration: none;
    font-weight: bold;
    color: #a3a3a3;
    }
#nav li a:after{
    display:block;
    width:100%;
    height:0px;
    content:" ";
    border:1px solid red;
    position: relative;
    top:10px;
}
#nav li a:hover:after{
    transition: 0.5s ease-in;
    transform: translate(0px, -10px);    
    }

/* End navigation bar styling. */

Answer 2

我已经在区域中修改了代码以获得所需的效果

DEMO http://jsfiddle.net/Lxxqz3pL/3/

#nav li a {
    display: block;
    padding: 8px 15px;
    text-decoration: none;
    font-weight: bold;
    color: #a3a3a3;
    padding: 22px 0 35px;
    color: #a3a3a3;
    border-bottom: 3px solid #6a901b;
    transition: all 0.5s ease;
}
#nav li a:hover {
    transition: all 0.5s ease;
    color: #fff;
    padding-bottom: 5px;
}

Answer 3

这样的事情怎么样？ FIDDLE

只需保持背景固定，在底部添加边框，然后缩小锚点的高度。

相关CSS

#nav li {
    float: left;
    height: 40px;
    }
#nav li a {
    display: block;
    padding: 8px 15px;
    text-decoration: none;
    font-weight: bold;
    color: #a3a3a3;
    height: 20px;
    transition: height 0.5s;
    }
#nav li a:hover {
    height: 10px;
    border-bottom: 3px solid red;
    }

Answer 4

示例站点看起来像是一个jQuery插件flexNav http://jasonweaver.name/lab/flexiblenavigation/

这是一个快速解决方案。我添加了转换为<li>填充以补偿添加的边框 http://jsfiddle.net/Lxxqz3pL/1/