<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <style>

             * {

                 margin: 0;

                 padding: 0;

                 border: none;

             }

             ul, li {

                 list-style: none;

             }

             body{

                 background: #ccc;

             }

             #box {

                 width: 150px;

                 height: 20px;

                 border: 1px solid white;

                 cursor: pointer;

             }

             #list {

                 width: 100px;

                 height: 150px;

                 background: black;

                 border: 1px solid white;

                 color: white;

                 display: none;

             }

             #list li{

                 border-bottom: 1px dashed white;

                 height: 29px;

                 line-height: 29px;

                 text-align: center;

                 cursor: pointer;

             }

         </style>

     </head>

     <body>

         <div id="box">请选择游戏名称</div>

         <ul id = "list">

             <li>英雄联盟</li>

             <li>魔兽世界</li>

             <li>大话西游</li>

             <li>天龙八部</li>

             <li>九阴真经</li>

         </ul>

         <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

         <script type="text/javascript">

             $(function () {

                 $("#box, #list").mouseenter(function () {

                     $("#list").show();

                 });

                 $("#box, #list").mouseleave(function () {

                     $("#list").hide();

                 });

                 $("#list li").mouseenter(function () {

                     $(this).css("background", "gray");

                 });

                 $("#list li").mouseleave(function () {

                     $(this).css("background", "black");

                 });

                 $("#list li").click(function(){

                     $("#box").html($(this).html());

                 })

             })

         </script>

     </body>

 </html>

jq-demo-点击选择（英雄联盟）的更多相关文章

  1. jq demo 点击弹窗，居中，可滚动，可拖动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. jq demo 点击评分组件

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. jq demo 点击选中元素左右移动

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  4. (转，感谢原作者！)既然选择了Linux,有何必在乎这些——Linux wine国服LOL英雄联盟，完美运行！！

    Linux下玩国服LOL,国服哦.网络上随处都可以搜到wine美服LOL的教程,但腾讯运营的国服客户端跟美服原版相差比较大,按照美服的方式不能搞起国服LOL,由于宿舍文化,这几天我专注于wine一个国 ...

  5. Android仿掌上英雄联盟首页，实现折叠效果

    概述 仿掌上英雄联盟首页的demo 详细 代码下载:http://www.demodashi.com/demo/10695.html 首页大概分为几个部分 状态栏 标题栏 轮播图 切换的Tab 资讯列 ...

  6. c# WinForm英雄联盟挂机源码及实现原理

    主要功能:全自动化英雄联盟挂机,游戏中会在原地放技能保持不掉线状态,游戏结束自动重新开始,自动选择英雄,可以晚上挂机刷人机: 缺陷:没怎么完善,如果掉线或者游戏崩溃网络断了软件会自动停止操作,使用时间 ...

  7. 用Python爬取英雄联盟（lol）全部皮肤

    小三:"怎么了小二?一副无精打采的样子!" 小二:"唉!别提了,还不是最近又接触了一个叫英雄联盟的游戏,游戏中很多皮肤都需要花钱买,但是我钱不够呀..." 小三 ...

  8. python爬虫——《英雄联盟》英雄及皮肤图片

    还记得那些年一起网吧开黑通宵的日子吗?<英雄联盟>绝对是大学时期的风靡游戏,即使毕业多年的大学同学相聚,难免不怀念一番当时一起玩<英雄联盟>的日子. 今天就给大家分享一下英雄及 ...

  9. 用Python抓取并分析了1982场英雄联盟数据，教你开局前预测游戏对局胜负！

    英雄联盟想必大多数读者不会陌生,这是一款来自拳头,由腾讯代理的大型网络游戏,现在一进网吧,你就能发现一大片玩英雄联盟的人.在2017年中国战队无缘鸟巢的世界总决赛后,一大片人选择了弃游,只是终究没躲过 ...

随机推荐

  1. svndumpfilter - 过滤一个 Subversion 仓库的转储文件 `dumpfile'。

    SYNOPSIS 总览 svndumpfilter command [options & args] OVERVIEW 概述 Subversion 是一个版本控制系统,允许保存旧版本的文件和目 ...

  2. MySQL索引与事务

    MySQL索引与事务 链接:https://pan.baidu.com/s/1ANGg3Kd_28BzQrA5ya17fQ 提取码:ekpy 复制这段内容后打开百度网盘手机App,操作更方便哦 1.索 ...

  3. AtCoder Grand Contest 001F Wide Swap

    解法参考这位大佬的:https://www.cnblogs.com/BearChild/p/7895719.html 因为原来的数组不好做于是我们想反过来数组,根据交换条件:值相邻且位置差大于等于k, ...

  4. Android蓝牙自动配对Demo，亲测好使！！！（转）

    蓝牙自动配对,即搜索到其它蓝牙设备之后直接进行配对,不需要弹出配对确认框或者密钥输入框. 转载请注明出处http://blog.csdn.net/qq_25827845/article/details ...

  5. 【Luogu】【关卡2-2】交叉模拟（2017年10月）

    任务说明:这里也是模拟,但是会混有些别的部分.思维难度不大,但是编写起来会有些难度.

  6. ES6 数组扩展（总结）

    1.扩展运算符 将一个数组转为用逗号分隔的参数序列 console.log(1, ...[2, 3, 4], 5) // 1 2 3 4 5 2.Array.from() 将两类对象转为真正的数组 类 ...

  7. QDomDocument::clear()的调用，会导致关闭程序时崩溃!!!

    //读一份xml前,先清理m_Doc[QDomDocument] bool XmlIO::xmlRead(QString &errmsg) { m_mutex.lock(); // m_Doc ...

  8. C# 调用c++数据类型对应

    C#调用 非托管C++ dll 传入Stringbuilder.ref string . ref char 等都报错,如mscorlib.dll 异常.其他信息: 尝试读取或写入受保护的内存.这通常指 ...

  9. 【TCP/IP】TCP的三次握手和四次挥手

    传输控制协议(TCP)是一种面向连接的协议,网络程序使用这个协议的时候,网络可以保证客户端和服务端的连接是可靠的,安全的. 如果 A机向 B机发送“hello”,在物理网线上传输的数据不仅仅是“hel ...

  10. 行业顶级NoSQL成员坐阵，NoSQL数据库专场重点解析！

    NoSQL数据库作为数据库市场最重要的组成之一,它的一举一动都影响着成千上万的企业.本专场邀请了行业顶级的NoSQL核心成员与大家共同展望NoSQL数据库的未来,阿里巴巴.MongoDB.Rediss ...