<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

<Style>

*{

    margin: 0;

    padding: 0;

    border: 0;

    list-style: none;

}

#box{

    width: 100px;

    border: 1px solid #000;

    line-height: 30px;

    text-align: center;

    margin: 50px auto;

}

#box ul{display: none;

}

span{

    background:url(up.gif) no-repeat 14px  center;

    display: block;

line-height: 30px;

}

</Style>

</head>

<body>

    <div id="box">

        <span id="title"> 金属</span>

            <ul id="ul">

                <li>黄金</li>

                <li>铜</li>

                <li>银</li>

                <li>铁</li>

                <li>铅</li>

            </ul>

    </div>

    <script>

let oBox=document.getElementById("box");

let oTitle=document.getElementById("title");

let oUl=document.getElementById("ul");

oBox.onmouseover=function (){

    oUl.style.display="block";

    oTitle.style.background="url(down.gif)no-repeat 14px center";

}

oBox.onmouseout=function (){

    oUl.style.display="none";

    oTitle.style.background="url(up.gif)no-repeat 14px center";

}

    </script>

</body>

</html>

鼠标移上显示的下拉菜单，和鼠标移上时显示的导航，html，JavaScript代码的更多相关文章

  1. 02 - Unit07：显示笔记下拉菜单、笔记的分享功能、笔记的删除功能

    显示笔记下拉菜单 笔记的分享功能 发送Ajax请求 绑定事件:绑定分享按钮单击事件 参数获取:笔记ID 发送请求:/share/add.do 服务器处理 ShareController ShareSe ...

  2. excel设置下拉菜单，并且不同值会显示不同颜色

    工作中常常要用的excel,每次都会有新的需求,然后不会,然后百度,然后过段时间可能就又忘了,于是就想说,自己记录下来~~~因为自己用的都是2010,其实哪个版本都差不多,都是应该可以找到相应的按钮滴 ...

  3. BootStrap字体图标不显示、下拉菜单不显示

    在W3CSchool学习BootStrap教程时遇到的问题…… 1.字体图标不能显示 上面是正常显示的样子,不能正常显示,因为缺少下面的字体图标样式文件 (1)在下载的Bootstrap包中将font ...

  4. IE6 下绝对定位position:absolute 与浮动不显示 (IE6 下拉菜单显示)

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD& ...

  5. 使用基于关系的选择器和伪类选择器创建纯CSS无JavaScript的鼠标移动到上面即可显示的下拉菜单

    html代码: <div class="menu-bar"> <ul> <li> <h3 class="text-warning ...

  6. Tinymce4 中Ajax多次加载时，会出现菜单在第二次进入时，显示的下拉菜单在左上角

    在项目中,ajax多次导入tinymce的js包 参考了: Having issues with Multiple AJAX refresh and TinyMCE load page with ti ...

  7. 基于Bootstrap实现下图所示效果的页面，一个白底的带有两个菜单项、一个下拉菜单和一个登录表单的基本导航条

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...

  8. [Selenium] 针对下拉菜单出现之后又立马消失的问题，通过Javascript改变元素的可见属性

    public void clickDateDropDownButton() { SeleniumUtil.jsClick(driver, page.getDateDropdownButtonOfInv ...

  9. 制作下拉菜单(PopupList)

    怎样判断是否应当使用下拉菜单 下拉菜单,就是将一系列的选项隐藏,通过单击某一个控件将会弹出一个包含这些选项的列表,在其中选择想要的选项.这样做不但可以节省屏幕空间,也可以让用户在进行选择时更加方便快捷 ...

随机推荐

  1. 查询MySQL数据库中表结构

    什么是表结构?表结构就是定义数据表文件名,确定数据表包含哪些字段,各字段的字段名.字段类型.及宽度,并将这些数据输入到计算机当中. 查询方法:以表‘employees’为例子 1.describe(d ...

  2. Pattern、Matcher的用法

    Pattern和Matcher Pattern 一个Pattern是一个正则表达式经编译后的表现模式. Matcher 一个Matcher对象是一个状态机器,它依据Pattern对象做为匹配模式对字符 ...

  3. 微服务迁移记（五）：WEB层搭建(4)-简单的权限管理

    一.redis搭建 二.WEB层主要依赖包 三.FeignClient通用接口 以上三项,参考<微服务迁移记(五):WEB层搭建(1)> 四.SpringSecurity集成 参考:< ...

  4. SAP四代增强实现：销售订单复制项目文本时不需要显示文本框和回车

    最近接收到一个业务需求,在SAP依据销售订单复制时,如果订单里面的项目有多个文本,系统就会显示复制的文本框处理,让用户选择是否复制,这个就让销售很不舒服,如果有几十个项目,每个项目有几个文本,那就就要 ...

  5. JavaScript高级程序设计（第三版） 6/25

    第六章面向对象的程序设计 1.定义只有在内部才用的特性(attribute)时,描述了属性(property)的各种特征.这些特性是为了实现JavaScript引擎用的,因此在JavaScript中不 ...

  6. PHP getdate() 函数

    ------------恢复内容开始------------ 实例 返回当前本地的日期/时间的日期/时间信息: <?phpprint_r(getdate());?> 运行实例 » 定义和用 ...

  7. linux之DNS主域,从域,缓存服务器的架设

    DNS主域,从域,缓存服务器的架设 DNS域名系统 组织域 顶级域  域名解析过程迭代递归 DNS(Domain Name System ) 在Internet中使用IP地址来确定计算机的地址. 为了 ...

  8. Qt自定义控件之仪表盘3--雷达扫描图

    1.设计思想 雷达扫描图,在影视作品中见到较多,比如飞机雷达.舰艇雷达,有一个扫描线转圈代表雷达一周旋转或一个批次的收发,发现目标就在表盘上标记位置.和汽车仪表盘类似,汽车仪表盘有底盘背景图.同圆.刻 ...

  9. 【Python】利用递归函数调用方式，将所输入的字符串，以相反的顺序显示出来

    源代码: """ 利用递归函数调用方式,将所输入的字符串,以相反的顺序显示出来 string_reverse_output():反向输出字符串的自定义函数 pending ...

  10. python3.4嵌套循环项目：买房分期付款（1）

    #案例:买房分期付款24万(10年期限) i=1#定义年份sum1=0while i<=10: print("第",i,"年到了......") j=1# ...