Javascript导航悬停效果答案

【问题标题】：Javascript navigation hover effectJavascript导航悬停效果
【发布时间】：2016-02-03 04:21:19
【问题描述】：

有谁知道如何在我的 HTML/CSS 文档中实现this web page 上显示的导航悬停效果？上述页面使用的是 WordPress 主题，但我想将绿色效果添加到我的通用网页中，并且还可以更改颜色。

附：我以前从未使用过Javascript。（做个好人。）

【问题讨论】：

可以通过css3过渡来完成。无需编写javascript。

标签： javascript html css menu navigationbar

【解决方案1】：

试试这个：

CSS

ul li{
 list-style:none;
}
ul li a{
transition:all 0.2s ease-out;
padding:5px;
border-radius:5px
}

ul li a:hover{
  background-color:#&dcc0e;
}

HTML：

<ul>
<li>
   <a>Hello</a>
</li>
</ul>

【讨论】：

【解决方案2】：

这个不需要任何js。您可以像这样使用 css 过渡创建效果。

div{
                width: auto;
                float: left;
            }
            a{
                color: red;
                text-decoration: none;
                padding: 5px 20px;
                float: left;
                position: relative;
            }
            a:hover{
                color:#FFF;
            }
            a:after{
                content: '';
                background: red;
                position: absolute;
                top: 50%;
                right: 5%;
                bottom: 50%;
                left: 5%;
                border-radius: 3px;
                transition: all .1s;
                z-index: -1;
            }
            a:hover:after{
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
            }

&lt;div&gt;&lt;a href="javaScript:void(0);"&gt;menu&lt;/a&gt;&lt;/div&gt;

【讨论】：