Javascript导航悬停效果

Question

谁知道如何在我的文档中实现this web page上显示的导航悬停效果？前面提到的页面使用的是WordPress主题，但我想将绿色效果添加到我的通用网页中，并能够更改颜色。

附言:我以前从来没有用过Javascript。(要友善。)

Answer 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>

Answer 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;
            }

<div><a href="javaScript:void(0);">menu</a></div>

​