Question

我是新来的，所以请告诉我，我是否错误地编写了错误的代码或文字。

This是我目前用于我的网页的代码。是的，我知道它简短而可怕，但我还在学习HTML / CSS。如果你在页面上运行它，你会注意到导航栏按钮上没有悬停事件，而一些摆弄徽标的人会发现实际的导航栏是一个很大的栏。（宽度：100％）

我只是想知道如何创建一个只在那里稍微悬停的东西，就像这样:(在左边盘旋，不在右边盘旋） Hover showcase

我不一定需要使用我当前的设置或准确，但我想解释如何做到这一点。（我从它上面拍摄的网站上的文字变得很淡淡，底部的栏上有一个幻灯片动画，但我不希望我能够做到这一点）

我还想知道如何将徽标与其他li元素放在同一个栏上，然后将徽标+ li元素（整个栏）的长度居中。（与左边的li元素居中，左边有一个标识相反。）另外，导航栏上方有一个粗的彩色条，但不是下边，像边缘一样，并且导航条也稍微厚一些，如同上面的图片描述得相当不错。

感谢您提供的任何帮助！

Hyao

Answer 1

因此，对于悬停颜色，您可以执行以下操作：

li:hover {
    color: blue;
    border-bottom: 3px solid blue;
}

要添加更多您可能想要做的动画：

    li {
        display: inline-block;
        vertical-align: middle;
    }
    li a:hover {
        color: blue;
    }

    li a:after {
        margin: 0 auto;
        width: 0px;
        height: 3px;
        display: block;
        content: "";
        background-color: blue;
        transition: width 0.5s linear;
    }

    li a:hover:after {
        width: 100%;
    }

    li img {
       padding: 14px 16px;
    }

http://plnkr.co/edit/GrxqcRjoMa7aWjHvnBhA

基本上你是在创建一个伪元素：之后在它的宽度上有一个动画。当您将鼠标悬停在li元素上时，伪元素将增长到宽度的100％，看起来像一个扩展的下划线。

要使图像与其他元素内联，请删除您的位置：#logo

的绝对样式

自定义悬停和ul / li元素？

1 个答案: