html - 模糊的导航栏

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（有一些浏览器限制）和 text-shadow + 过渡来做到这一点

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

这是有关过渡的一些信息

这里有一些关于 css 转换的更多读物， 它们会让你感兴趣

这里是文字阴影