1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <style type="text/css">
  7. ul{
  8. list-style: none;
  9. float: left;
  10. }
  11. li{
  12. display: none;
  13. }
  14. </style>
  15. <script type="text/javascript">
  16. function disp(){
  17. for(var i = 0; i<3; i++){
  18. document.getElementsByClassName('sss')[i].style.display='block';
  19. }
  20. }
  21. function out(){
  22. for(var i = 0; i<3; i++){
  23. document.getElementsByClassName('sss')[i].style.display='none';
  24. }
  25. }
  26. </script>
  27. </head>
  28. <body>
  29. <ul onmouseover="disp()" onmouseout="out()"> 手机数码
  30. <li class="sss">iPhone</li>
  31. <li class="sss">SAMSUNG</li>
  32. <li class="sss">SAMSUNG</li>
  33. </ul>
  34. </body>
  35. </html>
 
方法二
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <style type="text/css">
  7. li:hover #b{
  8. display: block;
  9. }
  10. #b{
  11. display: none;
  12. }
  13. </style>
  14. </head>
  15. <body>
  16. <ul>
  17. <li>sss
  18. <ul id="b">
  19. <li ></li>
  20. <li ></li>
  21. <li ></li>
  22. <li ></li>
  23. </ul>
  24. </li>
  25. </ul>
  26. </body>
  27. </html>

Html中鼠标悬停显示二级菜单的两种方法的更多相关文章

  1. Selenium操作示例——鼠标悬停显示二级菜单,再点击二级菜单或下拉列表

    这两天在玩python中selenium,遇到一个问题,就是鼠标移动到页面中某按钮或菜单,自动弹出二级菜单或下拉菜单,再自动点击其中的二级菜单或下拉列表. 首先,手工操作:打开母校的主页 http:/ ...

  2. 可以兼容ie6的纯CSS三级鼠标悬停显示/隐藏菜单实现

    本来在chrome上用js写的好好的三级显隐菜单,放到ie6上一测试竟然奇葩般的会瞎闪.问题原因至今没参透,可能是我每次响应事件的处理代码过长??总之我是对ie6幻灭了,去网上搜一搜能支持ie6的下拉 ...

  3. 鼠标经过显示二级菜单的js特效

    本文章来给大家推荐一个不错的鼠标经过显示二级菜单js特效效果,有需要了解的朋友可以参考一下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T ...

  4. 利用来JS控制页面控件显示和隐藏有两种方法

    利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一:  1 2 document.getEle ...

  5. 【转】oracle 中随机取一条记录的两种方法

    oracle 中随机取一条记录的两种方法 V_COUNT INT:=0; V_NUM INT :=0; 1:TBL_MYTABLE 表中要有一个值连续且唯一的列FID BEGIN SELECT COU ...

  6. 在PHP代码中处理JSON 格式的字符串的两种方法:

    总结: 在PHP代码中处理JSON 格式的字符串的两种方法: 方法一: $json= '[{"id":"1","name":"\u ...

  7. HTML中禁用表单控件的两种方法readonly与disabled

    时候我们会希望表单上的控件是不可修改的,比如在修改密码的网页中,显示用户名的文本框就应该是不可修改状态的,下面与大家分享下禁用表中控件的两种方法 在网页的制作过程中,我们会经常使用到表单.但是有时候我 ...

  8. Android中使用Gson解析JSON数据的两种方法

    Json是一种类似于XML的通用数据交换格式,具有比XML更高的传输效率;本文将介绍两种方法解析JSON数据,需要的朋友可以参考下   Json是一种类似于XML的通用数据交换格式,具有比XML更高的 ...

  9. AutoCAD.NET二次开发:创建自定义菜单的两种方法比较

    目前我已经掌握的创建CAD菜单方法有两种: COM方式: http://www.cnblogs.com/bomb12138/p/3607929.html CUI方式: http://www.cnblo ...

随机推荐

  1. MySQL复制配置(多主一从)

    复制多主一从 replicaion 原理 复制有三个步骤:(分为三个线程 slave:io线程 sql线程 master:io线程) 1.master将改变记录到二进制日志(binary log)中( ...

  2. 【Beta】Scrum05

    Info 由于12.9~12.11三天,PM和测试到上海参加比赛,期间PM对博客更新暂停,功能测试暂停,Scrum会议暂停,12.12日起补充及恢复之前未能完成的工作. 时间:2016.12.08 2 ...

  3. Ubuntu 14.04 LTS 安装 spark 1.6.0 (伪分布式)-26号开始

    需要下载的软件: 1.hadoop-2.6.4.tar.gz 下载网址:http://hadoop.apache.org/releases.html 2.scala-2.11.7.tgz 下载网址:h ...

  4. Java开发面试

    有很多文章说面试相关的问题,有国内也有国外的,但是我相信不少人,特   别是新人看完后还是觉得比较虚比较泛,似乎好像懂了,但是一遇到面试还   是有些手无足措或者重复犯一些错误.本篇文章正是结合实际经 ...

  5. java ssh 框架下 利用junit4 spring-test进行单元测试

    ssh框架下  由于bean实列 都交给spring 管理,要做单元测试就比较苦难,junit4 引入注解方便很多: 1. 加入依赖包 使用Spring的测试框架需要加入以下依赖包: JUnit 4 ...

  6. [译]JavaScript源码转换:非破坏式与再生式

    原文:http://ariya.ofilabs.com/2013/06/javascript-source-transformation-non-destructive-vs-regenerative ...

  7. php glob()函数实现目录文件遍历与寻找与模式匹配的文件路径

    采用PHP函数glob实现寻找与模式匹配的文件路径,主要讨论glob()函数的作用和用法,利用glob函数读取目录比其它的要快N倍,因为glob函数是内置函数处理起来自然要快. 一,函数原型 arra ...

  8. PHP判断文件或者目录是否可写

    在PHP中,可用is_writable()函数来判断一个 文件/目录 是否可写,详情如下: 参考 is_writable (PHP 4, PHP 5) is_writable — 判断给定的文件名是否 ...

  9. Linux date命令详解

    1.显示时间 date命令可以按照指定格式显示日期,只键入date则以默认格式显示当前时间.如下: 如果需要以指定的格式显示日期,可以使用“+”开头的字符串指定其格式,详细格式如下: %n : 下一行 ...

  10. vs2015安装体验

    后边出现这样的问题该怎么解决?