<!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. PHP xml_set_unparsed_entity_decl_handler() 函数

    定义和用法 xml_set_unparsed_entity_decl_handler() 函数规定当解析器在 XML 文档中找到无法解析的实体时被调用的函数. 如果成功,该函数则返回 TRUE.如果失 ...

  2. PHP usleep() 函数

    实例 延迟执行当前脚本 5 秒(5000000 微秒):高佣联盟 www.cgewang.com <?php echo date('h:i:s') . "<br>" ...

  3. 5.19 省选模拟赛 小B的图 最小生成树 LCT

    LINK:小B的图 这道题就比较容易了. 容易想到将询问离线 然后 从小到大排序 那么显然是优先放正图(x+k)的边. 考虑随着x的增大 那么负图上的边会逐渐加进来 一条边被加进来当且仅当 其权值小于 ...

  4. 9 16 模拟赛&关于线段树上二分总结

    1 考试时又犯了一个致命的错误,没有去思考T2的正解而是去简单的推了一下式子开始了漫漫找规律之路,不应该这样做的 为了得到规律虽然也打了暴力 但是还是打了一些不必要的程序 例如求组合数什么的比较浪费时 ...

  5. RNN神经网络模型原理

    1. 前言 循环神经网络(recurrent neural network)源自于1982年由Saratha Sathasivam 提出的霍普菲尔德网络. 传统的机器学习算法非常依赖于人工提取的特征, ...

  6. apicloud版人人商城app打包教程

    一.APP环境搭建和配置编译1.登录APICLOUD后台新建应用 步骤一 .注册账号注册apicloud 账号并登录APICLOUD控制台 注册apicloud 账号:https://www.apic ...

  7. 制作的excel表格如何放到微信公众号文章中？

    制作的excel表格如何放到微信公众号文章中? 我们都知道创建一个微信公众号,在公众号中发布一些文章是非常简单的,但公众号添加附件下载的功能却被限制,如今可以使用小程序“微附件”进行在公众号中添加附件 ...

  8. C# Thread.Name 的作用和意义

    Thread.Name属性 C#的线程提供Thread.Name属性.这意味着每个线程可以设定一个Name属性来标志它们. Name属性的使用时特性 线程的Name属性默认情况下是null.该值只能被 ...

  9. XCTF-WEB-新手练习区(9-12)笔记

    9:xff_referer X老师告诉小宁其实xff和referer是可以伪造的. 界面显示需要我们 添加X-Forwarded-For:123.123.123.123 添加Rerferer:http ...

  10. Elasticsearch第二篇：基本概念和基础操作

    上一篇文章,我们已经是在Windows10 上搭建了 Elasticsearch 环境已经安装了相关的插件,现在我们就可以像操作webapi一样简单的操作 ElasticSearch 了,有园友说可以 ...