用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的执行顺序 之jQuery.html并非万能钥匙
Mar 03 Javascript
JS 两日期相减,获得天数的小例子(兼容IE,FF)
Jul 01 Javascript
jQuery操作input值的各种方法总结
Nov 21 Javascript
require.js的用法详解
Oct 20 Javascript
Jquery1.9.1源码分析系列(十五)动画处理之外篇
Dec 04 Javascript
jQuery实现简单隔行变色的方法
Feb 20 Javascript
jQuery 利用ztree实现树形表格的实例代码
Sep 27 jQuery
JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
Mar 05 Javascript
简单了解前端渐进式框架VUE
Jul 20 Javascript
js实现三角形粒子运动
Sep 22 Javascript
三剑客:offset、client和scroll还傻傻分不清?
Dec 04 Javascript
深入理解javascript中的this
Feb 08 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定时任务延缓执行的实现
2014/10/08 PHP
PHP获取当前日期及本周一是几月几号的方法
2017/03/28 PHP
JavaScript 验证浏览器是否支持javascript的方法小结
2009/05/17 Javascript
javascript 写类方式之五
2009/07/05 Javascript
js生成动态表格并为每个单元格添加单击事件的方法
2014/04/14 Javascript
js实现点击图片改变页面背景图的方法
2015/02/28 Javascript
jquery表单对象属性过滤选择器实例分析
2015/05/18 Javascript
超漂亮的jQuery图片轮播特效
2015/11/24 Javascript
IE6-IE9使用JSON、table.innerHTML所引发的问题
2015/12/22 Javascript
JS对HTML表格进行增删改操作
2016/08/22 Javascript
Jquery和Js获得元素标签名称的方法总结
2016/10/08 Javascript
移动端日期插件Mobiscroll.js使用详解
2016/12/19 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
2017/03/01 Javascript
JS使用插件cryptojs进行加密解密数据实例
2017/05/11 Javascript
SpringMVC+bootstrap table实例详解
2017/06/02 Javascript
JavaScript实现设置默认日期范围为最近40天的方法分析
2017/07/12 Javascript
Javascript之图片的延迟加载的实例详解
2017/07/24 Javascript
vue实现百度下拉列表交互操作示例
2019/03/12 Javascript
聊聊Vue 中 title 的动态修改问题
2019/06/11 Javascript
微信小程序 如何获取网络状态
2019/07/26 Javascript
原生js实现贪吃蛇游戏
2020/10/26 Javascript
[03:26]回顾2015国际邀请赛中国区预选赛
2015/06/09 DOTA
浅析AST抽象语法树及Python代码实现
2016/06/06 Python
Python中几种属性访问的区别与用法详解
2018/10/10 Python
Flask和pyecharts实现动态数据可视化
2020/02/26 Python
python通过对字典的排序,对json字段进行排序的实例
2020/02/27 Python
英国计算机商店:Technextday
2019/12/28 全球购物
CAT鞋加拿大官网:CAT Footwear加拿大
2020/08/05 全球购物
SCHIESSER荷兰官方网站:德国内衣专家
2020/10/09 全球购物
打架检讨书400字
2014/01/17 职场文书
打造完美自荐信
2014/01/24 职场文书
表演方阵解说词
2014/02/08 职场文书
团日活动总结书
2014/05/08 职场文书
党员批评与自我批评发言
2014/10/02 职场文书
收银员岗位职责范本
2015/04/07 职场文书
Mysql Innodb存储引擎之索引与算法
2022/02/15 MySQL