模糊導航欄

Question

在您將鼠標懸停在圖標上方之前，我的導航欄始終處於清晰狀態。然後所有其他圖標都應該模糊，但目前所有圖標都是模糊的。我不知道如何做到這一點。 http://dl.dropbox.com/u/13722201/Dorset%20Designs/index.html

我相信你可以查看CSS來源以及如果沒有生病發布它。 http://dl.dropbox.com/u/13722201/Dorset%20Designs/main.css

Answer 1

你可以用CSS3做到這一點（有一些瀏覽器的限制），並在此文字陰影+過渡

http://jsfiddle.net/rlemon/sNQsy/是一個快速演示（這不會是100％跨瀏覽器..即例如，我會讓你弄清楚如何解決這個問題）。

這裏是源代碼。

HTML

<ul class="nav"> 
<li><a href="#">link one</a></li> 
<li><a href="#">link two</a></li> 
<li><a href="#">link three</a></li> 
<li><a href="#">link four</a></li> 
<li><a href="#">link five</a></li> 
</ul>​ 

CSS

.nav { 
list-style:none;  
} 
.nav li { 
float: left; 
padding: 2px 12px; 
} 
.nav li a { 
-webkit-transition: all 0.3s ease; 
-moz-transition: all 0.3s ease; 
-o-transition: all 0.3s ease; 
color: transparent; 
text-shadow: 0 0 5px rgba(0,0,0,0.5); 
} 
.nav li:hover a { 
color: black; 
text-shadow: none; 
}​ 

here是過渡

here is some more reading on css transforms一些信息，他們將你感興趣

和here on text shadows