css div模仿select下拉框跳转效果

最新推荐文章于 2021-08-04 00:01:50 发布

wachpe

最新推荐文章于 2021-08-04 00:01:50 发布

阅读量441

点赞数

分类专栏：技术文章文章标签： html css

本文链接：https://blog.csdn.net/u011166501/article/details/84233621

版权

技术文章专栏收录该内容

27 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.111cn.et/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css div模仿select下拉框跳转效果</title>
<style type="text/css">
body{
font:12px/20px Arial, Helvetica, sans-serif ,"宋体";
color:#222
}
ul,dl,dt,dd,form,p,h1,h2,h3,h4,h5,h6,blockquote,pre{margin:0;padding:0}
li{list-style:none}

img{border:0}
a{color:#1E5494}
a:hover{color:#2674D1}
input,select{font-size:12px;font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif}

.select{
position:relative;
padding:5px 5px 2px 5px;
width:52px;
background:#F4F4F4;
}
.select span{
cursor:pointer
}
#sub_list{
position:absolute;
padding:0 2px 2px 0;
top:28px;
left:0;
width:60px;
background:#F4F4F4
}
#sub_list ul{
display:block;
padding:5px;
border:1px solid #E1E1E1;
background:#FFF
}
#sub_list ul li{
border-bottom:1px solid #E1E1E1;
}
#sub_list ul li a{
display:block;
padding:3px 0 2px 3px;
text-decoration:none
}
#sub_list ul li a:hover{
background:#F4F4F4
}
.hidden{
display:none
}
</style>
</head>
<body>
<div class="select">
<span οnclick="showSelect(this,'sub_list')">请选择▲</span>
<div id="sub_list" class="hidden" οnclick="this.style.display = 'none'">
<ul>
<li><a href="http://111cn.net" target="_blank">1</a></li>
<li><a href="http://111cn.net/" target="_blank">2</a></li>
<li><a href="http://163.com/" target="_blank">3</a></li>
</ul>
</div>
</div>
</body>
</html>
<script type="text/javascript">
function showSelect(hld,id){
var ele = document.getElementByIdx_x(id);
ele.style.display = 'block';
var timer = null;
ele.onmouseover = function(){
if(timer){
clearTimeout(timer);
}
ele.style.display = 'block';
}
ele.onmouseout = function(){
timer = setTimeout(function(){ele.style.display = 'none'},500);
}

hld.onmouseover = function(){
if(timer){
clearTimeout(timer);
}
}
hld.onmouseout = function(){
timer = setTimeout(function(){ele.style.display = 'none'},500);
}
}
</script>

wachpe

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css div模仿select下拉框跳转效果

css div模仿select下拉框跳转效果body{ font:12px/20px Arial, Helvetica, sans-serif ,"宋体"; color:#222}ul,dl,dt,dd,form,p,h1,h2,h3,h4,h5,h6,blockquote,pre{margin:0;padding:0}li{list-sty...
复制链接

扫一扫

专栏目录