英文教程:鼠标悬停(hover)效果


 前面一个网页中利用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:

<h2>4 different ways to find your Kansas City Homes for Sale</h2> 
<ul id="differences"> 
<li id="diff-1"><h3><em>1</em><a href="benefits.html">See all MLS homes like an insider—join us</a></h3><div><p><a href="benefits.html">Join us </a> and see <strong>2,207</strong> additional homes, e-mail updates, and free custom website.</p></div></li> 
<li id="diff-2"><h3><em>2</em>What is my house worth?</h3><div><p>Find the <a href="/" title="empty">value of your home</a> from any of our agents with our competitive market analysis.</p></div></li> 
<li id="diff-3"><h3><em>3</em>Google™ search Kansas City area homes in MLS</h3><div><p><a href="/" title="empty">Search virtually all MLS homes</a> in the greater Kansas City area by using Google™.</p></div></li> 
<li id="diff-4"><h3><em>4</em>Map Kansas City real estate in Google™ maps </h3><div><p> <a href="cma.html" title="empty">See the location</a> of all Kansas City real estate with Google™ maps—map or satellite views.</p></div></li> 
</ul>

  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

http://www.prukc.com/



相关阅读:
Javascript学习笔记:封装(Encapsulation)
会自动逐行上升的文本框
DEDECMS整合DISCUZ精典教程
Windows7下win+e组合键失效的解决方法
用dedecms实现拼音显示文章标题页文件名的方法
asp.net网站的404错误页面的正确设置方法
“快马加鞭”—网站浏览提速七种武器
SQLServer 数据库开发顶级技巧
类写的select多选
Linux操作系统的口令安全问题详细解析
.htaccess文件优化WordPress页面加载速度
为什么刚装的Windows 7会发生蓝屏该如何解决
CSS:通过一个样式表区分IE的各个版本
使用 ASP+ 列表绑定控件(上)

Copyright © 2016 phpStudy |