推荐css打造经典鼠标触发显示选项 - 快车库

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

255 查看

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

<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/> 
<meta content="zh-CN" http-equiv="Content-Language"/> 
<title>css打造鼠标触发效果</title> 
<meta content="all" name="robots"/>  
<meta content="yyt_by@163.com,huanghai,www.hppd.cn 友情制作" name="author"/> 
<meta content="hppd" name="copyright"/> 
<meta content="hppd,prettydog,honeypig,web设计,交互设计,prettydog" name="description"/> 
<meta content="f2blog,phpblog,blog,php,xhtml,css,design,w3c,w3,w3cn,hppd,prettydog,honeypig,web设计,交互设计,prettydog" name="keywords"/>

<style type="text/css"> 
 
</style> 
<script type="text/javascript"> 
<![CDATA[//> 
<!-- 
startList = function() { 
    if (document.all&&document.getElementById) { 
        navRoot = document.getElementById("searchNav"); 
        for (i=0; i<navRoot.childNodes.length; i++) { 
            node = navRoot.childNodes[i]; 
            if (node.nodeName=="LI") { 
                node.onmouseover=function() { 
                    this.className+=" over"; 
                } 
                node.onmouseout=function() { 
                    this.className=this.className.replace(" over", ""); 
                } 
            } 
        } 
    } 
} 
window.onload=startList;

//--><!]]> 
</script>

<div class="kw_from"> 
  <form action="/search.html" id="searchForm" method="get" name="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="#">更多>> </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="#">更多城市>></a></span></li> 
           </ul> 
      </li> 
      </ul>  
      <div class="sbtn"> 
      <input class="btn4" name="submit" style="margin:0px 15px 2px 0;" type="submit" value="搜索工作"/> 
      </div> 
      <div class="searchMore"> 
        <a href="#">高级搜索</a>
<a href="#">分类搜索</a>      </div> 
  </form>  
</div>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

最近更新的内容

CSS Gradient详解
JS核心系列：浅谈 call apply 与 bind
JS核心系列：浅谈原型对象和原型链
利用bootstrap的modal组件自定义alert，confirm和modal对话框
前端工程师是怎样一种职业
详解Javascript中的Object对象
JavaScript 开发最佳实践
谈笑风生组件化
彻底理解js中this的指向
javascript 作用域和 this 关键字

你可能感兴趣的文章

在JavaScript中一切都是对象吗？
6本值得一读的JavaScript英文电子书
使用 SVG 输出 Octicon
如何压缩 HTTP 请求正文
谈谈 HTTP/2 的协议协商机制
console对象–详解
HTTP 412 错误 – 先决条件失败 (Precondition failed)
CSS vs JS动画：谁更快？
调试时屏蔽JavaScript库代码 –Chrome DevTools Blackbox功能介绍
Web开发者色彩搭配快速指南

2025 - 快车库 - 我的知识库重庆启连科技有限公司渝ICP备16002641号-10
企客连连表单助手企服开发榜单123

渝公网安备 50010702501581号