设为首页收藏本站

开启辅助访问切换到宽版

热搜: 手游棋牌素材小程序 92game 视频图片下载商业两性电影游戏娱乐自适应网址帝国CMS 织梦模板插件

源码网,源码论坛,源码之家,商业源码,游戏源码下载,discuz插件,棋牌源码下载,精品源码论坛»首页 › 教程专区 › 网络编程 › 推荐css打造经典鼠标触发显示选项

发新帖

查看: 588|回复: 11

[CSS/HTML] 推荐css打造经典鼠标触发显示选项

7万主题	861 回帖	32万积分

Rank: 8 Rank: 8

积分: 329525

发消息

发表于 2007-4-7 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[//> 
<!-- 
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>

</head>

<body> 
 
  <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><a href="#">更多>> </a></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><a href="#">更多城市>></a></li> 
           </ul> 
      </li> 
      </ul>  
       
      <input name="submit" type="submit" class="btn4" style="margin:0px 15px 2px 0;" value="搜索工作" /> 
       
       
        <a href="https://www.jb51.net/article/search_expert.html">高级搜索</a>
<a href="https://www.jb51.net/article/search_sort.html">分类搜索</a>       
  </form>  
 
</body> 
</html>

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

鼠标, 触发, 选项

相关帖子

回复

使用道具举报

0 主题	1万回帖	0 积分

Rank: 3 Rank: 3

积分: 0

发消息

发表于 2022-9-5 15:47:21 | 显示全部楼层

你们谁看了弄洒了可能

回复支持反对

使用道具举报

2 主题	1万回帖	73 积分

Rank: 2

积分: 73

发消息

发表于 2023-2-26 17:33:12 | 显示全部楼层

需要很久了终于找到了

回复支持反对

使用道具举报

0 主题	1万回帖	0 积分

Rank: 3 Rank: 3

积分: 0

发消息

发表于 2023-3-24 03:13:54 | 显示全部楼层

大家都不容易！

回复支持反对

使用道具举报

0 主题	1万回帖	0 积分

Rank: 3 Rank: 3

积分: 0

发消息

发表于 2023-3-29 13:39:14 | 显示全部楼层

问问问企鹅哇哇哇哇哇

回复支持反对

使用道具举报

0 主题	1万回帖	0 积分

Rank: 3 Rank: 3

积分: 0

发消息

发表于 2023-8-16 00:34:14 | 显示全部楼层

管灌灌灌灌灌灌灌灌灌灌

回复支持反对

使用道具举报

4 主题	1万回帖	262 积分

Rank: 3 Rank: 3

积分: 262

发消息

发表于 2023-10-9 03:40:47 | 显示全部楼层

8888888888888888

回复支持反对

使用道具举报

2 主题	1万回帖	347 积分

Rank: 3 Rank: 3

积分: 347

发消息

发表于 2024-3-16 07:24:21 | 显示全部楼层

1312315458748777

回复支持反对

使用道具举报

0 主题	1万回帖	0 积分

Rank: 3 Rank: 3

积分: 0

发消息

发表于 2024-7-13 13:57:04 | 显示全部楼层

天天源码社区论坛

回复支持反对

使用道具举报

1 主题	1万回帖	182 积分

Rank: 2

积分: 182

发消息

发表于 2024-7-13 17:51:23 | 显示全部楼层

很不错的玩意

回复支持反对

使用道具举报

发新帖

手机版|小黑屋|网站地图|源码论坛 ( 海外版 )

GMT+8, 2024-9-21 00:38 , Processed in 0.141850 second(s), 26 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表