DIV+CSS英文教程：鼠标悬停（hover）效果

今天给大家来一篇很不错的鼠标悬停效果，也是用CSS实现的。 　　这是一个很棒的鼠标悬停（hover）效果。从国外的网站上看到了，转载过来。没有作任何翻译与编辑，大家可以偿试阅读英文教程，加油！ 　　注意：此悬停效果在IE6中无效　　实例预览地址：[url=http://www.prukc.com/]http://www.prukc.com/[/url] 　　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：

4 different ways to find your Kansas City Homes for Sale

• 1See all MLS homes like an insider—join us

  Join us and see 2,207 additional homes, e-mail updates, and free custom website.

• 2What is my house worth?

  Find the value of your home from any of our agents with our competitive market analysis.

• 3Google™ search Kansas City area homes in MLS

  Search virtually all MLS homes in the greater Kansas City area by using Google™.

• 4Map Kansas City real estate in Google™ maps

  See the location of all Kansas City real estate with Google™ maps—map or satellite views.

　　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 　　diff-tabs-bottom-wide.gif 　　 You'll notice that both the hover background and the default background are saved as 1 gif file. This way the hover effect will go smooth without interuption. The entire image is loaded and the browser doesn’t have to load the hover images on the moment the user hovers the box. To be sure the box can grow we save the bottom part of the box and the top part of the box, making it long enough to be sure there will be no gaps (till a certain enlargement). The CSS styles The unordered list “differences” 　　This is the CSS for the list starting with the unordered list of the 4 boxes. To prevent the margins to collapse I’ve added float:left. #differences { margin:0.5em 0 1.5em 0; padding:0; list-style:none; width:100%; float:left; } The li element styles look like this: #differences li { margin:0 18px 0 0; padding:0; float:left; background:url(../images/diff-tabs-top-wide.gif) no-repeat 0 0; } 　　I add a right- margin of 18px to create a gutter between each box. The last box in the row doesn’t need this margin. Each li element has an id. The id for the last one is #diff-4. So I add this CSS style: #differences li#diff-4 { margin-right:0; } Making sure the tabbed boxes can grow 　　As you’ve noticed, we’ve linked the top part of the background image (the tab shape) to the li element via CSS. To make sure the tabbed boxes can grow if the user enlarges his text, we need to add an extra div in each li element. This way we can link the bottom part of the image to this div via CSS: #differences div { font-size:0.94em; padding:6px; background:url(../images/diff-tabs-bottom-wide.gif) no-repeat 0 100%; } 　　 With CSS3 we don’t have to go through this hassle of adding extra divs, because CSS3 allows for multiple background images on one element. This is my top favorite CSS3 fe