码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2016-06-09 12:08:23      阅读:136      评论:0      收藏:0      [点我收藏+]

标签:

因为工作以后,一直做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>

 

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

标签:

原文地址:http://www.cnblogs.com/coding4/p/5572129.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!