一个简单的输入框移入后显示下拉列表
Posted 飘然离去
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了一个简单的输入框移入后显示下拉列表相关的知识，希望对你有一定的参考价值。
因为工作以后，一直做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>
=========
显示y轴方向的滚动条
以上是关于一个简单的输入框移入后显示下拉列表的主要内容，如果未能解决你的问题，请参考以下文章
JQuery应用：实现下拉列表选择一项，然后在第二个下拉列表显示全部。谢谢了 请一定帮我做一下！200分！