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

模糊导航栏

1 个答案: