一个简单的输入框移入后显示下拉列表

因为工作以后，一直做Js,所以css只能是练习。哈哈

这个下拉列表，的宽度是固定的最好，如果不是固定的很难看的，所以最好有输入字体的限制。

   .test {width: 310px;margin-left: auto;margin-right:auto;position: relative;}
    .test input{width: 300px;height: 30px;margin-top: 100px;}
    .test ul{list-style: none; display: block;width: 300px;position: absolute;left: -35px;top: 120px;}
    .test ul li{border: 1px solid red;width: 100%;height: 30px;}
</style>
</head>

<body style="text-align:center;padding:0;margin:0">
<div class=‘test‘>
    <input type=‘text‘>
    <ul>
        <li>不管爱与不爱,都是历史的尘埃不管爱与不爱,都是历史的尘埃</li>
        <li>不管爱与不爱,都是历史的尘埃不管爱与不爱,都是历史的尘埃</li>
        <li>不管爱与不爱,都是历史的尘埃不管爱与不爱,都是历史的尘埃</li>

    </ul>
</div>
<script type="text/javascript" src=‘jquery-1.11.js‘></script>
<script type="text/javascript">
    $(".test input").hover( function () {
        $(".test ul").show();
    },function(){
        //$(".test ul").hide();
    });
</script>

时间： 2024-10-10 16:34:27

一个简单的输入框移入后显示下拉列表的相关文章

一个简单的导航菜单切换显示

一直都在用导航栏菜单选项的切换,使用js,jquery实现过相应的代码.下面展示一下用js实现切换: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test</title> <style type="text/css"> #container{width: 1100px;

js部分 <script type="text/javascript"> <!-- $(document).ready(function(e) { $('a.zhan').click(function(){ var left = parseInt($(this).offset().left)+10, top = parseInt($(this).offset().top)-10, obj=$(this); $(this).append('<div id=&quo

一个简单的全屏图片上下打开显示网页效果

打包下载地址:http://download.csdn.net/detail/sweetsuzyhyf/7602105 上源码看效果: <!DOCTYPE html> <html> <head> <title></title> <style> body { margin: 0; padding: 0; } .wrap { overflow: hidden; position: fixed; z-index: 99999; width:

一个简单的Shell 显示程序

#!/bin/bash clear declare FirstName Greeting Greeting="Hello ," echo "" echo "Enter Your First Name:" read FirstName echo "$Greeting $FirstName" 首先 vim Print 回车然后 i 进入插入状态编辑以上代码,Esc 键回车输入 chmod 711 P

SqlSever基础 top 后面的n 由一个简单的计算式子计算得出

镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ 1 base code 1 use master 2 drop database helloworld 3 4 5 --创建一个数据库 6 create database helloworld 7 8 9 10 --用helloworld1这个数据库 11 use helloworld 12 13

一个简单的时间片轮转多道程序内核代码分析（学号后三位418）

一.基于mykernel的基本Linux内核分析 1.我们按照老师在github上给出的步骤在实验楼上启动最高小内核,可以看到如下现象在窗口中我们可以看到一个内核以及运行起来了,比较简单的内核,只时不停的输出一些字符串,>>>>>>my_time_handler here<<<<<<<和my_start_kernel here和一些计数.这时因为我们并没有加入其他的代码,再次基础上我们可以加入我们主机要实现的功能. 在myin

为什么一个简单腹泻，服用了附子理中丸后，会绵延十年不愈？(转)

为什么一个简单腹泻,服用了附子理中丸后,会绵延十年不愈? 这个患者腹泻已经十多年了,最开始腹泻一天3次左右,大便呈泡沫状,于是就用附子理中丸控制,服用后上症稍缓解,停药后又复发,患者遂间断用附子理中丸控制腹泻,可渐渐地效果就不好了. 3年前,开始在西医消化内科接受正式治疗,服用复发谷氨酰胺和双歧杆菌等,治疗后上症稍缓解,后又因饮酒而复发.又用中成药控制,附子理中丸,补脾益肠丸,参苓白术散,四神丸,肉蔻四神丸等等,但是依然停药又加重. 附子遂遍访中医名医,具体用药不详,大概换了五个医师,依然服停

一个简单的记事本编辑框的实现以及搜集的一些窗口风格的预定义

这是一个简单的记事本的窗口过程 1 WndProc proc hWnd:HWND, uMsg:UINT, wParam:WPARAM, lParam:LPARAM 2 3 LOCAL winRect:RECT 4 LOCAL editWidth:DWORD 5 LOCAL editHeight:DWORD 6 7 .IF uMsg==WM_DESTROY 8 invoke PostQuitMessage,NULL 9 .ELSEIF uMsg==WM_CREATE 10 ;创建一个编辑框 11

Vue2.0基础学习（3）--- 一个简单的实例学习

看完vue 的官方文档,再做一个简单的实例是最好不过了,既能巩固我们所学的知识,又能学以致用.infoq上推荐了一篇文章,面向重度 jQuery 开发者的 Vue.js 介绍, 它是老外写的,用vue做了一个简单的实例,非常适合学完vue文档来练练手,我这里并没有翻译文档,而是做了几次后,自已的思路. 首先看一下这个实例长什么样子,有什么功能上面是一个文本框,用于输入内容,但最多只能输入140个字,所以右下角会有字数提示.当用户进行输入的时候,右下角的数字不断变化,提示用户还剩多少字可以输入.