650) this.width=650;" border="0" alt="" src="http://img1.51cto.com/attachment/201203/111634937.png" />

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. 

  2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. 

  3. <head>
    4. 

  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    5. 

  5. <meta http-equiv="Content-Language" content="zh-CN" />
    6. 

  6. <title>css打造鼠标触发效果</title>
    7. 

  7. <style type="text/css">
    8. 

  8. <!--
    9. 

  9. body {
    10. 

  10. margin: 0;
    11. 

  11. padding: 0;
    12. 

  12. color: #000;
    13. 

  13. font-size: 12px;
    14. 

  14. line-height: 160%;
    15. 

  15. text-align: left;
    16. 

  16. height: 100%;
    17. 

  17. font-family: '宋体',Tahoma ,arial,verdana,sans-serif,'Lucida Grande','Lucida Sans Unicode';
    18. 

  18. }
    19. 

  19. *{ margin:0; padding:0;}
    20. 

  20. h2,h2 a:link,h2 a:hover,h2 a:visited{
    21. 

  21. font-size: 14px;
    22. 

  22. text-decoration: none;
    23. 

  23. color: #000000;
    24. 

  24. }
    25. 

  25. .kw_from {
    26. 

  26. padding:20px 0 0 0px;
    27. 

  27. margin: auto;
    28. 

  28. height: 300px;
    29. 

  29. overflow: hidden;
    30. 

  30. width: 650px;
    31. 

  31. }
    32. 

  32. .kw_from .sbtn{
    33. 

  33. float:left;
    34. 

  34. width:80px;
    35. 

  35. padding: 16px 0 0 0;
    36. 

  36. }
    37. 

  37. .kw_from .searchMore{
    38. 

  38. float:left;
    39. 

  39. width:80px;
    40. 

  40. padding: 4px;
    41. 

  41. }
    42. 

  42. #searchNav {
    43. 

  43. width:430px;
    44. 

  44. float: left;
    45. 

  45. }
    46. 

  46. #searchNav #conter1, #searchNav #conter3{
    47. 

  47. float:left;
    48. 

  48. width:250px;
    49. 

  49. }
    50. 

  50. #searchNav #conter2, #searchNav #conter4{
    51. 

  51. float:left;
    52. 

  52. width:180px;
    53. 

  53. }
    54. 

  54. #searchNav ul {
    55. 

  55. padding: 0;
    56. 

  56. margin: 0;
    57. 

  57. list-style: none;
    58. 

  58. }
    59. 

  59. #searchNav li {
    60. 

  60. float: left;
    61. 

  61. }
    62. 

  62. #searchNav li ul {
    63. 

  63. display: none;
    64. 

  64. top: 20px;
    65. 

  65. }
    66. 

  66. #searchNav li:hover ul, #searchNav li.over ul {
    67. 

  67. display: block;
    68. 

  68. float:left;
    69. 

  69. }
    70. 

  70. #searchNav ul li a{
    71. 

  71. float:left;
    72. 

  72. display:block;
    73. 

  73. font-size:12px;
    74. 

  74. padding:3px;
    75. 

  75. text-decoration: none;
    76. 

  76. color: #777;
    77. 

  77. }
    78. 

  78. #searchNav ul li a:hover{
    79. 

  79. background-color:#f4f4f4;
    80. 

  80. }
    81. 

  81. #searchNav #jobKw{
    82. 

  82. width:220px;
    83. 

  83. height:18px;
    84. 

  84. }
    85. 

  85. #searchNav #cityKw{
    86. 

  86. width:130px;
    87. 

  87. height:18px;
    88. 

  88. }
    89. 

  89. -->
    90. 

  90. </style>
    91. 

  91. <script type="text/javascript">
    92. 

  92. <!--//--><![CDATA[//>
    93. 

  93. <!--
    94. 

  94. startList = function() {
    95. 

  95. if (document.all&&document.getElementById) {
    96. 

  96. navRoot = document.getElementById("searchNav");
    97. 

  97. for (i=0; i<navRoot.childNodes.length; i++) {
    98. 

  98. node = navRoot.childNodes[i];
    99. 

  99. if (node.nodeName=="LI") {
    100. 

  100. node.onmouseover=function() {
    101. 

  101. this.className+=" over";
    102. 

  102. }
    103. 

  103. node.onmouseout=function() {
    104. 

  104. this.className=this.className.replace(" over", "");
    105. 

  105. }
    106. 

  106. }
    107. 

  107. }
    108. 

  108. }
    109. 

  109. }
    110. 

  110. window.onload=startList;
    111. 

  111. //--><!]]>
    112. 

  112. </script>
    113. 

  113. </head>
    114. 

  114. <body>
    115. 

  115. <div class="kw_from">
    116. 

  116. <form action="/search.html" method="get" name="searchForm" id="searchForm" onsubmit="return check()">
    117. 

  117. <ul id="searchNav">
    118. 

  118. <li id="conter1"><h2>找什么</h2>
    119. 

  119. <input id="jobKw" name="jobKw" type="text" />
    120. 

  120. <ul id="conter3">
    121. 

  121. <li><a href="#">会计</a> </li>
    122. 

  122. <li><a href="#">网页设计</a></li>
    123. 

  123. <li><a href="#">翻译</a></li>
    124. 

  124. <li><a href="#">家教</a></li>
    125. 

  125. <li><span class="moreCity"><a href="#">更多>> </a></span></li>
    126. 

  126. </ul>
    127. 

  127. </li>
    128. 

  128. <li id="conter2"><h2>在那里</h2>
    129. 

  129. <input id="cityKw" name="cityKw" type="text" />
    130. 

  130. <ul id="conter4">
    131. 

  131. <li><a href="#">北京</a> </li>
    132. 

  132. <li><a href="#">上海</a></li>
    133. 

  133. <li><a href="#">广州</a></li>
    134. 

  134. <li><a href="#">深圳</a></li>
    135. 

  135. <li><a href="#">南京</a></li>
    136. 

  136. <li><a href="#">天津</a></li>
    137. 

  137. <li><a href="#">杭州</a></li>
    138. 

  138. <li><a href="#">成都</a></li>
    139. 

  139. <li><a href="#">重庆</a></li>
    140. 

  140. <li><a href="#">武汉</a></li>
    141. 

  141. <li><a href="#">西安</a></li>
    142. 

  142. <li><a href="#">沈阳</a></li>
    143. 

  143. <li><span class="moreCity"><a href="#">更多城市>></a></span></li>
    144. 

  144. </ul>
    145. 

  145. </li>
    146. 

  146. </ul>
    147. 

  147. <div class="sbtn">
    148. 

  148. <input name="submit" type="submit" class="btn4" style="margin:0px 15px 2px 0;" value="搜索工作" />
    149. 

  149. </div>
    150. 

  150. <div class="searchMore">
    151. 

  151. <a href="search_expert.html">高级搜索</a><br /><a href="search_sort.html">分类搜索</a> </div>
    152. 

  152. </form>
    153. 

  153. </div>
    154. 

  154. </body>
    155. 

  155. </html>

CSS打造经典鼠标触发显示选项的更多相关文章

  1. css3动画 一行字鼠标触发 hover 从左到右颜色渐变

    偶然的机会发现的这个东东 这几天做公司的官网 老板突然说出了一个外国网站 我就顺手搜了 并没有发现他说的高科技 但是一个东西深深地吸引了我 就是我下面要说的动画  这个好像不能放视频 我就简单的描述一 ...

  2. HTML与CSS入门经典(第9版)试读 附随书源码 pdf扫描版​

    HTML与CSS入门经典(第9版)是经典畅销图书<HTML与CSS入门经典>的最新版本,与过去的版本相同,本书采用直观.循序渐进的方法,为读者讲解使用HTML5与CSS3设计.创建并维护世 ...

  3. 通过HTML+CSS+JavaScript实现鼠标移动到页面顶部导航栏出现，如果移出导航栏3秒又隐藏起来，而且不受滚动条影响（二）

    通过HTML+CSS+JavaScript实现鼠标移动到页面顶部导航栏出现,如果移出导航栏3秒又隐藏起来,而且不受滚动条影响(二) 效果:默认一直隐藏导航栏,当滚动条滚到超过300px按钮出现,点击回 ...

  4. 使用css打造形形色色的形状！

    使用css打造形形色色的形状! css是非常强大的工具,如果我们掌握的好,那么许多复杂的形状不需要使用图片而直接使用css完成即可,这不仅有利于减少http请求以增强性能还便于日后的管理和维护,一举两 ...

  5. JS+CSS打造三级折叠菜单，自动收缩其它级 js

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...

  6. 【酷】JS+CSS打造沿Y轴纵深运动的3D球体

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  7. 【CSS Demo】纯 CSS 打造 Flow-Steps 导航

    low-Steps 导航效果常用于需要表示执行步骤的交互页面,效果如下: 步骤一 步骤二 步骤三   通常使用图片来实现 Flow-Steps 效果,但此方法的灵活性不足,当内容变化较大时就可能需要重 ...

  8. Expression构建DataTable to Entity 映射委托 sqlserver 数据库里面金额类型为什么不建议用float，实例告诉你为什么不能。 sql server 多行数据合并成一列 C# 字符串大写转小写，小写转大写，数字保留，其他除外 从0开始用U盘制作启动盘装Windows10系统(联想R720笔记本)并永久激活方法 纯CSS打造淘宝导航菜单栏 C# Winform

    Expression构建DataTable to Entity 映射委托   1 namespace Echofool.Utility.Common { 2 using System; 3 using ...

  9. Css打造一个简单的静态七巧板

    偶然在微博上看到用css写一个七巧板,正好也有一些源代码,于是就试着敲了敲. 主要是利用了css3的transform,实现平移,旋转,变形,直接用看到的代码敲出来之后有些问题,因为宽度上下面绿色的三 ...

随机推荐

  1. nginx安装pcre

    一.有的服务器上没有安装pcre那么安装nginx的时候会报错 所以在安装之前我们可以: yum install pcre-devel 如果很不巧,服务器也没有配yum,也不能连互联网.那么我们只能自 ...

  2. 数据库SQL优化大总结之 百万级数据库优化方案（转）

    1.对查询进行优化,要尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2.应尽量避免在 where 子句中对字段进行 null 值判断,否则将导致引擎放弃使用索 ...

  3. 实现chrome扩展启动本地进程 - 补充

    实现chrome扩展启动本地进程 - 补充 标签: chrome扩展启动本地程序访问本地磁盘 2014-10-17 11:42 6753人阅读 评论(17) 收藏 举报  分类: Chrome Plu ...

  4. 一个因为粗心的Bug

    /** * 数据绑定,分页显示 */ private void updataMenu(final EditText search) { if(listwz==null) { return; } pag ...

  5. java中String类型变量的赋值问题

    第一节 String类型的方法参数 运行下面这段代码,其结果是什么? package com.test; public class Example { String str = new String( ...

  6. 一次ssl的手动实现——加密算法的简单扫荡

    引言 最近LZ在公司里接了一个活,要发布一些服务给公司的合作伙伴调用.这种工作LZ可谓是轻车熟路,之前已经做了无数服务端.不过与以往不同的是,这次的服务是要发布在互联网上的,因此不能再像之前的套路一样 ...

  7. UITextField实现左侧空出一定的边距

    就是通过uitextfield的leftview来实现的,同时要设置leftviewmode. 如果设置左右边距,需要再加上rightView功能 -(void)setTextFieldLeftPad ...

  8. [USACO2005][POJ2228]Naptime（对特殊环状DP的处理）

    题目:http://poj.org/problem?id=2228 题意:将一天分为N小时,每小时都有一个价值w,有一头牛要睡觉,而它的睡觉是连续的,且第一小时不能算价值,即如果你睡了[a,b],则你 ...

  9. 机器学习中的矩阵方法(附录A）： 病态矩阵与条件数

    1. 病态系统 现在有线性系统: Ax = b, 解方程 很容易得到解为: x1 = -100, x2 = -200. 如果在样本采集时存在一个微小的误差,比如,将 A 矩阵的系数 400 改变成 4 ...

  10. java多线程-Semaphore信号量使用

    介绍 信号量(Semaphore),有时被称为信号灯,是在多线程环境下使用的一种设施, 它负责协调各个线程, 以保证它们能够正确.合理的使用公共资源. 概念 Semaphore分为单值和多值两种,前者 ...