JavaScript导航悬停效果

Question

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

PS我以前从未使用过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>