前面一个网页中利用CSS建立立体表格效果，今天给大家来一篇很不错的鼠标悬停效果，也是用CSS实现的。

　　这是一个很棒的鼠标悬停（hover）效果。从国外的网站上看到了，转载过来。没有作任何翻译与编辑，大家可以偿试阅读英文教程，加油！

　　注意：此悬停效果在IE6中无效
　　实例预览地址：http://www.prukc.com/

　　I would like to share some insight on a piece of CSS I’ve used for the homepage for a website a while ago that I’ve built together with Roger Johansson.

The HTML markup

　　Let’s take a look first at the HTML markup for this. First we need to think about the structure of this piece of content. How should it be structured with CSS disabled and still make sense for the user. I think a bullet list makes sense. We sum up the 4 different ways to find your Kansas City Homes for Sale. This is the (X)HTML markup:

HTML：

　　If you look ate the page with CSS disabled, I think this markup is well structured and it’s perfect to build the necessary CSS to achieve the style I have in mind.

The background images

　　If you look at the final page and the effect I want to achieve with the tabs, you know that I need to create background images for this that are able to grow if the user enlarges the text. Here is how they look:

　　diff-tabs-top-wide.gif