[英]Javascript navigation hover effect
有誰知道如何在我的HTML / CSS文檔中實現此網頁上顯示的導航懸浮效果? 前面提到的頁面使用的是WordPress主題,但是我想將這種綠色效果添加到我的通用網頁中,並且還可以更改顏色。
PS我以前從未使用過Javascript。 (對人好點。)
嘗試這個:
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;
}
<ul>
<li>
<a>Hello</a>
</li>
</ul>
這不需要任何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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.