<!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.js框架中，开发一个具备查询、下拉框选择、分类显示和分页功能的表格是一个常见的需求。下面将详细介绍如何实现这些功能。 首先，我们需要安装必要的依赖库，如Element UI，它提供了丰富的UI组件，包括表格...
其次，"下拉框左右移动"通常指的是下拉列表（select元素）的动态效果。在JavaScript中，可以监听鼠标或键盘事件，通过修改CSS属性来实现元素的位置变化。例如，使用jQuery库，我们可以添加以下代码： ```javascript...
总结来说，对于微信内置浏览器在iPhone上点击下拉框出现页面乱跳转的问题，开发者可以通过模拟select元素来规避，使用JavaScript和CSS来实现类似的功能，同时结合设备判断以确保在不影响其他平台的情况下提供稳定的...
自定义下拉框通常用于提供多个选项供用户选择，可以使用`<select>`元素或者通过CSS和JavaScript来构建。在这个案例中，`.toggleoption`很可能是这样一个下拉框，它的显示与隐藏由`#gga`元素控制。这种设计允许创建...
8. 下拉框`<select>`： - `option`定义选项，`value`设置值，`selected`指定默认选中项。 9. 表格`<table>`： - `table`属性包括`bgcolor`, `align`, `width`, `height`等，用于设置整体样式。 - `tr`定义行，`...
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...
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-Quill-Editor的小图标样式排布错乱，即图标排列不整齐或者文字大小选择时超出边框，这通常是由于缺少必要的CSS样式导致的。Quill编辑器本身有一套完整的样式体系，为了使编辑器正常显示，我们需要...
- **下拉框**: `<select>`用于创建下拉菜单。 - **文件选择器**: `<input type="file">`用于文件上传。 - **日期选择器**: `<input type="date">`用于选择日期。 - **颜色选择器**: `<input type="color">`用于...
- **下拉框**：`<select>`创建下拉列表，`multiple`用于多选，`selected`指定默认选项。 - **上传文件**：`<input type="file">`允许用户选择本地文件，`size`定义输入框宽度。 - **禁用元素**：`disabled`属性可...