用jquery模仿的a的title属性的例子


Posted in Javascript onOctober 22, 2014

用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属性的例子

Javascript 相关文章推荐
用jquery来定位
Feb 20 Javascript
js 页面执行时间计算代码
Mar 04 Javascript
jQuery 图像裁剪插件Jcrop的简单使用
May 22 Javascript
学习ExtJS Panel常用方法
Oct 07 Javascript
容易被忽略的JS脚本特性
Sep 13 Javascript
JS比较两个时间大小的简单示例代码
Dec 20 Javascript
javascript事件函数中获得事件源的两种不错方法
Mar 17 Javascript
JavaScript跨域调用基于JSON的RESTful API
Jul 09 Javascript
js正则表达式最长匹配(贪婪匹配)和最短匹配(懒惰匹配)用法分析
Dec 27 Javascript
原生JS写Ajax的请求函数功能
Dec 22 Javascript
layui使用form表单实现post请求页面跳转的方法
Sep 14 Javascript
如何正确理解vue中的key详解
Nov 02 Javascript
运用jQuery定时器的原理实现banner图片切换
Oct 22 #Javascript
用简洁的jQuery方法toggleClass实现隔行换色
Oct 22 #Javascript
jQuery实现的导航条切换可显示隐藏
Oct 22 #Javascript
原生js和jQuery随意改变div属性style的名称和值
Oct 22 #Javascript
一个不错的js html页面倒计时可精确到秒
Oct 22 #Javascript
js实现select跳转功能代码
Oct 22 #Javascript
Javascript原型链和原型的一个误区
Oct 22 #Javascript
You might like
提高PHP编程效率的53个要点(经验小结)
2010/09/04 PHP
mysql总结之explain
2012/02/27 PHP
php向js函数传参的几种方法
2014/08/10 PHP
codeigniter显示所有脚本执行时间的方法
2015/03/21 PHP
CI配置多数据库访问的方法
2016/03/28 PHP
PHP 序列化和反序列化函数实例详解
2020/07/18 PHP
Laravel解决nesting level错误和隐藏index.php的问题
2019/10/12 PHP
javascript jq 弹出层实例
2013/08/25 Javascript
js对图片base64编码字符串进行解码并输出图像示例
2014/03/17 Javascript
14个有用的Jquery技巧分享
2015/01/08 Javascript
使用Node.js实现HTTP 206内容分片的教程
2015/06/23 Javascript
JavaScript判断微信浏览器实例代码
2016/06/13 Javascript
基于JavaScript实现焦点图轮播效果
2017/03/27 Javascript
javascript实现Java中的Map对象功能的实例详解
2017/08/21 Javascript
深度了解vue.js中hooks的相关知识
2019/06/14 Javascript
vue2.x 对象劫持的原理实现
2020/04/19 Javascript
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
2020/07/28 Javascript
JavaScript 事件代理需要注意的地方
2020/09/08 Javascript
python基于multiprocessing的多进程创建方法
2015/06/04 Python
基于python中的TCP及UDP(详解)
2017/11/06 Python
Python实现比较扑克牌大小程序代码示例
2017/12/06 Python
python PyTorch预训练示例
2018/02/11 Python
python3+PyQt5实现拖放功能
2018/04/24 Python
详细整理python 字符串(str)与列表(list)以及数组(array)之间的转换方法
2019/08/30 Python
CSS3中Animation动画属性用法详解
2016/07/04 HTML / CSS
HTML5 常用语法一览(列举不支持的属性)
2010/01/26 HTML / CSS
西班牙汉普顿小姐:购买帆布鞋和太阳镜
2016/10/23 全球购物
捷克家居装饰及图书音像购物网站:Velký košík
2018/04/16 全球购物
美国领先的低折扣旅行网站:Hotwire
2019/01/19 全球购物
会计专业推荐信
2013/10/29 职场文书
少儿节目主持串词
2014/04/02 职场文书
敬老院标语
2014/06/27 职场文书
企业趣味活动方案
2014/08/21 职场文书
个人年终总结怎么写
2015/03/09 职场文书
关于maven依赖 ${xxx.version}报错问题
2022/01/18 Java/Android
解决IDEA翻译插件Translation报错更新TTK失败不能使用
2022/04/24 Python