`
lian
  • 浏览: 56958 次
  • 性别: Icon_minigender_1
  • 来自: 洛阳
社区版块
存档分类
最新评论

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

阅读更多
<!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 onclick="showSelect(this,'sub_list')">请选择▲</span>
  <div id="sub_list" class="hidden" onclick="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>
分享到:
评论

相关推荐

    vue实现表格的查询,下拉框,以及分页功能

    在Vue.js框架中,开发一个具备查询、下拉框选择、分类显示和分页功能的表格是一个常见的需求。下面将详细介绍如何实现这些功能。 首先,我们需要安装必要的依赖库,如Element UI,它提供了丰富的UI组件,包括表格...

    下拉框左右移动 表格隔行显示不同颜色 分页代码

    其次,"下拉框左右移动"通常指的是下拉列表(select元素)的动态效果。在JavaScript中,可以监听鼠标或键盘事件,通过修改CSS属性来实现元素的位置变化。例如,使用jQuery库,我们可以添加以下代码: ```javascript...

    使用微信内置浏览器点击下拉框出现页面乱跳转现象(iphone),该怎么办

    总结来说,对于微信内置浏览器在iPhone上点击下拉框出现页面乱跳转的问题,开发者可以通过模拟select元素来规避,使用JavaScript和CSS来实现类似的功能,同时结合设备判断以确保在不影响其他平台的情况下提供稳定的...

    toggle一个div显示或隐藏且可扩展成自定义下拉框

    自定义下拉框通常用于提供多个选项供用户选择,可以使用`&lt;select&gt;`元素或者通过CSS和JavaScript来构建。在这个案例中,`.toggleoption`很可能是这样一个下拉框,它的显示与隐藏由`#gga`元素控制。这种设计允许创建...

    html+css基础知识.pdf

    8. 下拉框`&lt;select&gt;`: - `option`定义选项,`value`设置值,`selected`指定默认选中项。 9. 表格`&lt;table&gt;`: - `table`属性包括`bgcolor`, `align`, `width`, `height`等,用于设置整体样式。 - `tr`定义行,`...

    《程序天下:JavaScript实例自学手册》光盘源码

    5.4 div的折迭效果 5.5 圆角div 5.6 动态添加iframe框架 5.7 用层实现长文章分页 5.8 iframe自适应高度 5.9 类似MSN的消息提示 5.10 只打印iframe的内容 第6章 下拉列表特效 6.1 下拉框实现多选 6.2 实现两个select...

    程序天下:JavaScript实例自学手册

    5.4 div的折迭效果 5.5 圆角div 5.6 动态添加iframe框架 5.7 用层实现长文章分页 5.8 iframe自适应高度 5.9 类似MSN的消息提示 5.10 只打印iframe的内容 第6章 下拉列表特效 6.1 下拉框实现多选 6.2 实现两个select...

    解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题

    首先,当遇到Vue-Quill-Editor的小图标样式排布错乱,即图标排列不整齐或者文字大小选择时超出边框,这通常是由于缺少必要的CSS样式导致的。Quill编辑器本身有一套完整的样式体系,为了使编辑器正常显示,我们需要...

    web前端基础学习笔记

    - **下拉框**: `&lt;select&gt;`用于创建下拉菜单。 - **文件选择器**: `&lt;input type="file"&gt;`用于文件上传。 - **日期选择器**: `&lt;input type="date"&gt;`用于选择日期。 - **颜色选择器**: `&lt;input type="color"&gt;`用于...

    web前段学习心得体会.pdf

    - **下拉框**:`&lt;select&gt;`创建下拉列表,`multiple`用于多选,`selected`指定默认选项。 - **上传文件**:`&lt;input type="file"&gt;`允许用户选择本地文件,`size`定义输入框宽度。 - **禁用元素**:`disabled`属性可...

Global site tag (gtag.js) - Google Analytics