区域内的css效果线

Question

我是前端开发的新手，我在photoshop中创建了一个设计，我把它移植到html / css，但我有一点问题：

我希望在元素处于悬停时添加稍暗的底线

这是我的代码

css：

#global_left_nav ul{
    list-style-type: none;    
    font-family: "Lobster1";
    font-size: 20px;
    color: #5a4e4e;
}


#global_left_nav ul li{
    background: #2e2828 url("images/diagonal_pattern.png") repeat;
    background-blend-mode: multiply;

    width: 200px;
    height: 50px;

    position: relative;

    text-align: center;
    margin-bottom: 30px;
    line-height: 44px;
    padding: 0;
}

#global_left_nav ul li:hover {
    color: #c43a3a;
    text-shadow: 1px 0px 0px #000,
        0 1px 0 #000;
}

html：

<nav id="global_left_nav">
        <ul>
            <li>Acceuil</li>
            <li>Forum</li>
            <li>Event</li>
            <li>Live</li>
            <li>Equipes</li>
        </ul>
    </nav>

Answer 1

试试这个：

#global_left_nav ul li:hover { border-bottom: 2px solid #000; }

顺便说一下，它是“Accueil”而非“Acceuil”;）

Answer 2

您可以向border-bottom添加li媒体资源：

#global_left_nav ul li:hover {
    color: #c43a3a;
    text-shadow: 1px 0px 0px #000, 0 1px 0 #000;
    border-bottom: 3px solid #000000;
}

当它悬停时，这会为你的ul增加一条黑色的3px线。

Answer 3

试试这个：

#global_left_nav ul li:hover {
  border-bottom: 5px solid #000;
  height: 45px;
}

这是实例：

https://jsfiddle.net/hv81rb5u/3/

这将为您提供所需的效果，而且，当您将鼠标悬停在按钮上时，按钮不会“跳跃”。