用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 相关文章推荐
jQuery Ajax 全解析
Feb 08 Javascript
SWFObject 2.1以上版本语法介绍
Jul 10 Javascript
精心挑选的15款优秀jQuery 本特效插件和教程
Aug 06 Javascript
JavaScript和CSS通过expression实现Table居中显示
Jun 28 Javascript
一个JS的日期格式化算法示例
Jul 31 Javascript
js 遍历json返回的map内容示例代码
Oct 29 Javascript
jQuery中阻止冒泡事件的方法介绍
Apr 12 Javascript
Javascript 绘制 sin 曲线过程附图
Aug 21 Javascript
Jquery中CSS选择器用法分析
Feb 10 Javascript
JavaScript数据结构之二叉树的查找算法示例
Apr 13 Javascript
把JavaScript代码改成ES6语法不完全指南(分享)
Sep 10 Javascript
JS返回顶部实例代码
Aug 09 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实现多条件查询实例代码
2010/07/17 PHP
PHP分页函数代码(简单实用型)
2010/12/02 PHP
PHP实现一个多功能购物网站的案例
2017/09/13 PHP
PHP实现二叉树深度优先遍历(前序、中序、后序)和广度优先遍历(层次)实例详解
2018/04/20 PHP
javascript+mapbar实现地图定位
2010/04/09 Javascript
一个关于jqGrid使用的小例子(行按钮)
2011/11/04 Javascript
Javascript拓展String方法小结
2013/07/08 Javascript
js字符串转换成数字与数字转换成字符串的实现方法
2014/01/08 Javascript
JavaScript学习笔记之Function对象
2015/01/22 Javascript
jquery序列化方法实例分析
2015/06/10 Javascript
设置jquery UI 控件的大小方法
2016/12/12 Javascript
AngularJS全局警告框实现方法示例
2017/05/18 Javascript
mui上拉加载更多下拉刷新数据的封装过程
2017/11/03 Javascript
Vuex提升学习篇
2018/01/11 Javascript
jQuery实现标签子元素的添加和赋值方法
2018/02/24 jQuery
基于vue.js实现的分页
2018/03/13 Javascript
AngularJS与后端php的数据交互方法
2018/08/13 Javascript
详解微信小程序与内嵌网页交互实现支付功能
2018/10/22 Javascript
vue-cli2与vue-cli3在一台电脑共存的实现方法
2019/09/25 Javascript
[03:41]2018完美盛典-《Fight With Us》
2018/12/16 DOTA
python 3.5下xadmin的使用及修复源码bug
2017/05/10 Python
Python使用re模块正则提取字符串中括号内的内容示例
2018/06/01 Python
Python过滤txt文件内重复内容的方法
2018/10/21 Python
Jupyter Notebook远程登录及密码设置操作
2020/04/10 Python
HTML5本地存储之Web Storage详解
2016/07/04 HTML / CSS
Onzie官网:美国时尚瑜伽品牌
2019/08/21 全球购物
Java面向对象面试题
2016/12/26 面试题
中职应届生会计求职信
2013/10/23 职场文书
酒店总经理欢迎词
2014/01/08 职场文书
餐饮投资计划书
2014/04/25 职场文书
大班上学期幼儿评语
2014/04/30 职场文书
党支部综合考察材料
2014/05/19 职场文书
五四青年节的活动方案
2014/08/20 职场文书
邮政竞聘演讲稿
2014/09/03 职场文书
创业计划书之餐饮馄饨店
2019/07/18 职场文书
Java获取字符串编码格式实现思路
2022/09/23 Java/Android