推荐css打造经典鼠标触发显示选项

更新时间：2007年04月07日 00:00:00 作者：

看到了分享：绝对经典的滑轮新闻显示(javascript+css) 这个帖子，都是css+js的控制经典，其实单css就可以搞定了，只不过是为了兼容那垃圾的 IE 才不得做个js ，
以下的代码如果去掉js部分地话，在Opear和Firrfox都能正常的，但是IE下就不行了。
大家有兴趣的可以测试一下。也希望能帮到有需要的人。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="zh-CN" /> <title>css打造鼠标触发效果</title> <meta content="all" name="robots" />  <meta name="author" content="yyt_by@163.com,huanghai,www.hppd.cn 友情制作" /> <meta name="copyright" content="hppd" /> <meta name="description" content="hppd,prettydog,honeypig,web设计,交互设计,prettydog" /> <meta name="keywords" content="f2blog,phpblog,blog,php,xhtml,css,design,w3c,w3,w3cn,hppd,prettydog,honeypig,web设计,交互设计,prettydog" /> <style type="text/css">  </style> <script type="text/javascript"> <![CDATA[//> <!]]> </script> </head> <body> <div class="kw_from">   <form action="/search.html" method="get" name="searchForm" id="searchForm" onsubmit="return check()">               <ul id="searchNav">         <li id="conter1"><h2>找什么</h2>            <input id="jobKw" name="jobKw" type="text"  />            <ul id="conter3">            <li><a href="#">会计</a> </li>            <li><a href="#">网页设计</a></li>            <li><a href="#">翻译</a></li>            <li><a href="#">家教</a></li>                  <li><span class="moreCity"><a href="#">更多&gt;&gt; </a></span></li>            </ul>         </li>        <li id="conter2"><h2>在那里</h2>            <input id="cityKw" name="cityKw" type="text"  />            <ul id="conter4">            <li><a href="#">北京</a> </li>            <li><a href="#">上海</a></li>            <li><a href="#">广州</a></li>            <li><a href="#">深圳</a></li>            <li><a href="#">南京</a></li>            <li><a href="#">天津</a></li>            <li><a href="#">杭州</a></li>            <li><a href="#">成都</a></li>            <li><a href="#">重庆</a></li>            <li><a href="#">武汉</a></li>            <li><a href="#">西安</a></li>            <li><a href="#">沈阳</a></li>            <li><span class="moreCity"><a href="#">更多城市&gt;&gt;</a></span></li>            </ul>       </li>       </ul>        <div class="sbtn">       <input name="submit" type="submit" class="btn4" style="margin:0px 15px 2px 0;" value="搜索工作" />       </div>       <div class="searchMore">         <a href="search_expert.html">高级搜索</a><a href="search_sort.html">分类搜索</a>      </div>   </form>  </div> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

推荐css打造经典鼠标触发显示选项

CSS 美化段落文本之首字下沉
今天要讲的内容是如何实现“首字下沉”，，第一个字是很大的红色楷体，陷于一段文字之首。这种做法在杂志中常见，但是在网页中不那么常见。那么如何实现呢？其实很简单，只有一句CSS就可以了。
2008-07-07
不通过JavaScript实现的自动滚动视差效果
这篇文章介绍了一种通过CSS3实现的视差（Parallax）效果，这个效果通过在一个元素上叠加多个背景图片，并使用-webkit- transition-属性来实现。
2009-04-04
对于IE7、FF、OP清除浮动的最优方法
对于IE7、FF、OP清除浮动的最优方法...
2007-11-11
Pjblog模板制作教程超强推荐
Pjblog模板制作教程超强推荐...
2007-02-02
Div CSS absolute与relative的区别小结
Div + CSS 进行网页布局，适当地运用 absolute 与 relative，能给布局带来意想不到的效果和方便，达到事半功倍…本文介绍了关于 absolute 与 relative 的运用。
2007-12-12
中文排版CSS心得
中文排版CSS心得...
2007-01-01
推荐深入理解css中的position定位和z-index属性
推荐深入理解css中的position定位和z-index属性...
2007-10-10
跨浏览器的实践:position:fixed 层的固定定位
一般要固定某个div,我们都会让该div{position:fixed},它的下一个div{position:absolute}看了几个国外的关于CSS的固定定位跨浏览解决方案.他们却反其道而为之
2008-11-11
鼠标移动到超链接上的效果
鼠标移动到超链接上的效果...
2007-02-02
CSS规则层叠时的优先级算法
CSS 规则的优先级是Web前端开发人员必须理解的一个概念，我们常用的添加样式的方法有4种。
2008-04-04

推荐css打造经典鼠标触发显示选项

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具