用jquery模仿的a的title属性(兼容ie6/7)


Posted in Javascript onJanuary 21, 2013

用jQuery实现的模仿a的title属性的例子,在测试的时候ie6,7上出现了层次混乱,不过最终解决了。
html代码如下

<div class="wrap"> 
<ul class="list clearfix"> 
<li><a href="">UI设计师</a> 
<div class="show"> 
<p>所属部门:技术部</p> 
<p>工作地点:郑州</p> 
<p>招聘人数:21</p> 
</div> 
</li> 
<li><a href="">前端开发工程师</a> 
<div class="show"> 
<p>所属部门:技术部</p> 
<p>工作地点:郑州</p> 
<p>招聘人数:21</p> 
</div> 
</li> 
<li><a href="">运维工程师</a> 
<div class="show"> 
<p>所属部门:技术部</p> 
<p>工作地点:郑州</p> 
<p>招聘人数:21</p> 
</div> 
</li> 
<li><a href="">研发开发工程师</a> 
<div class="show"> 
<p>所属部门:技术部</p> 
<p>工作地点:郑州</p> 
<p>招聘人数:21</p> 
</div> 
</li> 
<li><a href="">UI设计师</a> 
<div class="show"> 
<p>所属部门:技术部</p> 
<p>工作地点:郑州</p> 
<p>招聘人数:21</p> 
</div> 
</li> 
<li><a href="">前端开发工程师</a> 
<div class="show"> 
<p>所属部门:技术部</p> 
<p>工作地点:郑州</p> 
<p>招聘人数:21</p> 
</div> 
</li> 
<li><a href="">运维工程师</a> 
<div class="show"> 
<p>所属部门:技术部</p> 
<p>工作地点:郑州</p> 
<p>招聘人数:21</p> 
</div> 
</li> 
<li><a href="">研发开发工程师</a> 
<div class="show"> 
<p>所属部门:技术部</p> 
<p>工作地点:郑州</p> 
<p>招聘人数:21</p> 
</div> 
</li> 
<li><a href="">UI设计师</a> 
<div class="show"> 
<p>所属部门:技术部</p> 
<p>工作地点:郑州</p> 
<p>招聘人数:21</p> 
</div> 
</li> 
<li><a href="">前端开发工程师</a> 
<div class="show"> 
<p>所属部门:技术部</p> 
<p>工作地点:郑州</p> 
<p>招聘人数:21</p> 
</div> 
</li> 
<li><a href="">运维工程师</a> 
<div class="show"> 
<p>所属部门:技术部</p> 
<p>工作地点:郑州</p> 
<p>招聘人数:21</p> 
</div> 
</li> 
<li><a href="">研发开发工程师</a> 
<div class="show"> 
<p>所属部门:技术部</p> 
<p>工作地点:郑州</p> 
<p>招聘人数:21</p> 
</div> 
</li> 
</ul> 
</div>

css代码如下
* { 
margin:0; 
padding:0; 
} 
body { 
font-size:12px; 
} 
.wrap { 
width:600px; 
margin:100px auto; 
} 
.clearfix:after, .clearfix:before { 
display:table; 
content: ""; 
} 
.clearfix:after { 
clear:both; 
overflow: hidden; 
} 
.clearfix { 
zoom: 1; 
} 
.list { 
position:relative; //作为定位的父元素,li直接做父元素出现元素内容重叠问题 
} 
.list li { 
list-style:none; 
width:100px; 
height:24px; 
line-height:24px; 
margin-right:10px; 
float:left; 
} 
.list li a { 
text-decoration:none; 
color:#333; 
display:block; 
} 
.show { 
position:absolute; 
width:100px; 
background:#FFFFE1; 
border:1px solid #ffcc01; 
padding:6px; 
display:none; 
z-index:5; 
margin-top:10px; //代替top 
margin-left:60px; //代替left 
} 
.show p { 
height:18px; 
line-height:18px; 
} 
.list li a:hover { 
text-decoration:underline; 
color:#FF0000; 
}

jQuery代码如下
<script type="text/javascript"> 
$(function(){ 
var $li=$(".wrap").find("li"); 
$li.bind("mouseover",function(){ 
$(this).find(".show").show(); 
}).bind("mouseout",function(){ 
$(this).find(".show").hide(); 
}) 
}) 
</script>

预览效果;
用jquery模仿的a的title属性(兼容ie6/7)
Javascript 相关文章推荐
javascript 清除输入框中的数据
Apr 13 Javascript
Extjs Gird 支持中文拼音排序实现代码
Apr 15 Javascript
JS获取当前日期时间并定时刷新示例
Mar 04 Javascript
JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题
Dec 07 Javascript
谈一谈JS消息机制和事件机制的理解
Apr 14 Javascript
JavaScript实现移动端滑动选择日期功能
Jun 21 Javascript
jquery 判断selection range 是否在容器中的简单实例
Aug 02 Javascript
Jquery Easyui日历组件Calender使用详解(23)
Dec 18 Javascript
webpack入门必知必会
Jan 16 Javascript
性能优化篇之Webpack构建速度优化的建议
Apr 03 Javascript
解决layer.prompt无效的问题
Sep 24 Javascript
一起来了解一下JavaScript的预编译(小结)
Mar 01 Javascript
jquery创建一个新的节点对象(自定义结构/内容)的好方法
Jan 21 #Javascript
给jQuery方法添加回调函数一款插件的应用
Jan 21 #Javascript
js 关键词高亮(根据ID/tag高亮关键字)案例介绍
Jan 21 #Javascript
ExtJS中文乱码之GBK格式编码解决方案及代码
Jan 20 #Javascript
使用jquery实现图文切换效果另加特效
Jan 20 #Javascript
分享一个我自己写的ToolTip提示插件(附源码)
Jan 20 #Javascript
使用jQuery.fn自定义jQuery翻页插件
Jan 20 #Javascript
You might like
用PHP中的 == 运算符进行字符串比较
2006/11/26 PHP
PHP多线程批量采集下载美女图片的实现代码(续)
2013/06/03 PHP
php include和require的区别深入解析
2013/06/17 PHP
解析php中如何调用用户自定义函数
2013/08/06 PHP
phpmyadmin配置文件现在需要绝密的短密码(blowfish_secret)的2种解决方法
2014/05/07 PHP
ThinkPHP中的系统常量和预定义常量集合
2014/07/01 PHP
php运行报错Call to undefined function curl_init()的最新解决方法
2016/11/20 PHP
php+Ajax处理xml与json格式数据的方法示例
2019/03/04 PHP
php中使用array_filter()函数过滤数组实例讲解
2021/03/03 PHP
jQuery 事件队列调整方法
2009/09/18 Javascript
jQuery 判断元素上是否绑定了事件
2009/10/28 Javascript
jQuery学习3:操作元素属性和特性
2010/02/07 Javascript
基于jquery实现的服务器验证控件的启用和禁用代码
2010/04/27 Javascript
jQuery Mobile页面跳转后未加载外部JS原因分析及解决
2013/03/18 Javascript
js加入收藏以及使用Jquery更改透明度
2014/01/26 Javascript
jquery删除指定的html标签并保留标签内文本内容的方法
2014/04/02 Javascript
深入理解JavaScript系列(44):设计模式之桥接模式详解
2015/03/04 Javascript
JavaScript实现找质数代码分享
2015/03/24 Javascript
js实现仿阿里巴巴城市选择框效果实例
2015/06/24 Javascript
javascript实现数组内值索引随机化及创建随机数组的方法
2015/08/10 Javascript
JS组件Form表单验证神器BootstrapValidator
2016/01/26 Javascript
JavaScript中setTimeout和setInterval函数的传参及调用
2016/03/11 Javascript
Angular 向组件传递模板的两种方法
2018/02/23 Javascript
js实现每日签到功能
2018/11/29 Javascript
如何在 ant 的table中实现图片的渲染操作
2020/10/28 Javascript
python中如何使用正则表达式的集合字符示例
2017/10/09 Python
Python 将pdf转成图片的方法
2018/04/23 Python
django 发送邮件和缓存的实现代码
2018/07/18 Python
浅谈Python中的生成器和迭代器
2020/06/19 Python
如何使用python自带IDLE的几种方法
2020/10/10 Python
HTML+CSS3+JS 实现的下拉菜单
2020/11/25 HTML / CSS
中文系师范生自荐信
2013/10/01 职场文书
教学评估实施方案
2014/03/16 职场文书
宣传工作经验材料
2014/06/02 职场文书
简单租房协议书
2014/10/21 职场文书
2015年民主生活会发言材料
2014/12/15 职场文书