今天在網上亂逛的時候發現了網站http://studioantwork.com/,其中功能表列當滑鼠懸浮時透明度會降低,一般來說,我們會使用jquery來實現這一過渡效果,不過在這裡設計者使用了一種不同的方法,對於孤陋寡聞的我來說實在是太新奇了。
以下是作者的源碼
/* fade */#title { padding: 0px 0px 0px 0px; float:left; opacity: 1; -webkit-transition: opacity 0.3s; -moz-transition: opacity 0.3s; -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out;}#title:hover {opacity: 0.5;}
有新鮮東西難免學習一下,在此中就會碰到很多問題需要記錄
我有一個菜單
<nav> <ul id="main-nav"> <li><a href="http://www.w3school.com.cn">HOME</a></li> <li><a href="#">a</a></li> <li><a href="#">b</a></li> <li><a href="#">c</a></li> </ul></nav>
怎麼來實現這個功能呢。
nav ul li a{opacity:1;color:#000000;text-transform:uppercase;text-decoration:none;-webkit-transition: opacity 0.35s ease-out; -moz-transition: opacity 0.35s ease-out; -o-transition: opacity 0.35s ease-out; }nav ul li a :hover{opacity:0.5;}
這麼看似乎是可以了,但是一運行發現是不行的。
作為一個苦逼的GIS工程師,對於CSS神馬的實在是有夠不懂的,於是果斷上w3school尋找協助。
根據w3school中對CSS偽類的說法,在 CSS 定義中,a:hover 必須被置於 a:link 和 a:visited 之後,才是有效。
詳見http://www.w3school.com.cn/css/css_pseudo_classes.asp
那麼為什麼studioantwork中的寫法就是OK的呢。各種原因我並不瞭解,希望有瞭解的朋友幫忙解惑。但這不妨礙我模仿,於是有了下面的代碼
#main-nav a{ opacity: 1; -webkit-transition: opacity 0.3s; -moz-transition: opacity 0.3s; -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out;}#main-nav a:hover{opacity: 0.5; }
經實驗,這樣就OK了。
另外呢,通過google,找到了http://www.189works.com/article-78327-1.html,在此有通過a:link,a:visited,a:hover實現此效果的介紹。