用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 相关文章推荐
对table和ul实现js分页示例分享
Feb 24 Javascript
JavaScript的arguments对象应用示例
Sep 15 Javascript
node.js中的querystring.unescape方法使用说明
Dec 10 Javascript
js中javascript:void(0) 真正含义
Nov 05 Javascript
javascript鼠标右键菜单自定义效果
Dec 08 Javascript
jQuery的框架介绍
May 11 Javascript
辨析JavaScript中的Undefined类型与null类型
May 26 Javascript
EasyUI创建人员树的实例代码
Sep 15 Javascript
在JS循环中使用async/await的方法
Oct 12 Javascript
浅析Vue下的components模板使用及应用
Nov 27 Javascript
jQuery实现弹出层效果
Dec 10 jQuery
JS Canvas接口和动画效果大全
Apr 29 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 Squid中可缓存的动态网页设计
2008/09/17 PHP
php中判断字符串是否全是中文或含有中文的实现代码
2011/09/16 PHP
基于php上传图片重命名的6种解决方法的详细介绍
2013/04/28 PHP
eclipse php wamp配置教程
2016/06/30 PHP
php 解决substr()截取中文字符乱码问题
2016/07/18 PHP
PHP 二维关联数组根据其中一个字段排序(推荐)
2017/04/04 PHP
jquery动画3.创建一个带遮罩效果的图片走廊
2012/08/24 Javascript
javascript抽象工厂模式详细说明
2014/12/16 Javascript
jQuery获取URL请求参数的方法
2015/07/18 Javascript
火狐和ie下获取javascript 获取event的方法(推荐)
2016/11/26 Javascript
JavaScript cookie详解及简单实例应用
2016/12/31 Javascript
JS 插件dropload下拉刷新、上拉加载使用小结
2017/04/13 Javascript
深入理解Vue生命周期、手动挂载及挂载子组件
2017/09/27 Javascript
vue.js如何将echarts封装为组件一键使用详解
2017/10/10 Javascript
NodeJS安装图文教程
2018/04/19 NodeJs
使用ng-packagr打包Angular的方法示例
2018/09/21 Javascript
vue-router懒加载速度缓慢问题及解决方法
2018/11/25 Javascript
JS获取当前时间的年月日时分秒及时间的格式化的方法
2019/12/18 Javascript
详解vue-router 动态路由下子页面多页共活的解决方案
2019/12/22 Javascript
vue 自定义组件的写法与用法详解
2020/03/04 Javascript
解决Vue中的生命周期beforeDestory不触发的问题
2020/07/21 Javascript
openlayers4.6.5实现距离量测和面积量测
2020/09/25 Javascript
jQuery实现tab栏切换效果
2020/12/22 jQuery
Python 3.x 判断 dict 是否包含某键值的实例讲解
2018/07/06 Python
python 实现一个简单的线性回归案例
2020/12/17 Python
numba提升python运行速度的实例方法
2021/01/25 Python
美国知名运动产品零售商:Foot Locker
2016/07/23 全球购物
俄罗斯极限运动网上商店:Board Shop №1
2020/12/18 全球购物
介绍一下#error预处理
2015/09/25 面试题
美术专业学生个人自我评价
2013/09/19 职场文书
大一自我鉴定范文
2013/10/04 职场文书
前处理班长职位说明书
2014/03/01 职场文书
教学评估实施方案
2014/03/16 职场文书
诚信承诺书模板
2014/05/26 职场文书
2016大学自主招生推荐信范文
2015/03/23 职场文书
如何写好竞聘报告
2019/04/03 职场文书