效果如下： 利用选择a:hover的子对象， li a {width:90px; height:87px; display:block; position:relative; text-decoration:none;} li a span { display:none;} li a:hover span { display:block; position:absolute; top:70px; left:0; text-align:center; background:#000; color:#fff; width:90px; height:17px; line-height:17px;} 具体例子猛击下面链接： /examples/img-tips/img-tips.html
效果图 代码非常简单，主要是利用了负margin的效果： CSS： ul { list-style:none;} li { float:left; width:87px; height:25px; text-align:center; line-height:25px; margin-left:-3px;} li a { width:87px; height:25px; display:block; background:url(m_bg.gif) no-repeat; font-size:14px; font-weight:bold; color:#fff; text-decoration:none;} li a:hover { background:url(m_bg.gif) no-repeat 0 -25px;} XHTML： <ul> <li><a href="#">项目一</a></li> <li><a href="#">项目一</a></li> <li><a href="#">项目一</a></li> <li><a href="#">项目一</a></li> </ul> 完整实例效果：/examples/menu01/menu.html
标题党， 其实我想说，我不会去用CSS实现圆角的，没那个需求也没那个必要，用图片的背景的话，在结构上更清晰有条理了。 在FF和Chrome里可以用CSS3的属性，搞定圆角，爽~ 代码也更简洁，何乐而不为。 因为目前CSS3还未正式定下来，所以，都是通过私有属性来进行设置： FireFox: -moz-border-radius:8px; Chrome,Safari -webkit-border-radius:8px;
无聊在淘宝UED招聘页面上看到这道题目： 小A是一个交互设计师，某日接到一个任务—— 设计一个表单，一共只有三个输入框，而且都不是必填项。 小A就开始犯愁了： 如果有一项是必填的，我可以给它加上“*”，那剩下的两项就不是必填的。但现在三项都不是必填的，我怎么把这个信息表达给用户呢？ 另外，如果我把这个信息表达得过于明显了，用户当然都会偷懒不填的。那我怎么才能收集到尽可能多的用户输入呢？ 这分寸的把握比谈恋爱还难了，怎么办呢？
/examples/hover-focus.html 看看这样的表单效果，是不是很帅，而且又不需要你花费什么功夫 input[type=text]:hover, input[type=text]:focus { border:1px solid #f60} 不过遗憾的是，IE6除了对于A标签的一些效果，对于其它对象，基本上是不支持伪类效果的；IE7支持了:hover，但还是不支持:focus，Opera和FireFox当然是支持的，当然，要IE支持也不是没有办法，不过要用到js，很多时候，偶想想，还是算了~~现在开始考虑渐进优化，SB浏览器就让他去吧。
