用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 相关文章推荐
基础的prototype.js常用函数及其用法
Mar 10 Javascript
解决iframe的frameborder在chrome/ff/ie下的差异
Aug 12 Javascript
javascript放大镜效果的简单实现
Dec 09 Javascript
JS原型链 详解及示例代码
Sep 06 Javascript
详解JavaScript中this的指向问题
Jan 20 Javascript
详解node HTTP请求客户端 - Request
May 05 Javascript
seajs中模块依赖的加载处理实例分析
Oct 10 Javascript
JS获取一个表单字段中多条数据并转化为json格式
Oct 17 Javascript
JS面向对象的程序设计相关知识小结
May 26 Javascript
vue-router启用history模式下的开发及非根目录部署方法
Dec 23 Javascript
vue通信方式EventBus的实现代码详解
Jun 10 Javascript
小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
Apr 15 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
比较strtr, str_replace和preg_replace三个函数的效率
2013/06/26 PHP
PHP抓屏函数实现屏幕快照代码分享
2014/01/02 PHP
thinkphp配置连接数据库技巧
2014/12/02 PHP
linux mint下安装phpstorm2020包括JDK部分的教程详解
2020/09/17 PHP
js函数调用常用方法详解
2012/12/03 Javascript
url参数中有+、空格、=、%、&amp;、#等特殊符号的问题解决
2013/05/15 Javascript
JS修改iframe页面背景颜色的方法
2015/04/01 Javascript
Js+php实现异步拖拽上传文件
2015/06/23 Javascript
JS封装的自动创建表格的实现代码
2016/06/15 Javascript
JS获取多维数组中相同键的值实现方法示例
2017/01/06 Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
2017/03/04 Javascript
Vue框架之goods组件开发详解
2018/01/25 Javascript
JavaScript实现矩形块大小任意缩放
2020/08/25 Javascript
原生js实现拖拽移动与缩放效果
2020/08/24 Javascript
微信小程序入门之绘制时钟
2020/10/22 Javascript
[01:04]DOTA2上海特锦赛现场采访 FreeAgain遭众解说围攻
2016/03/25 DOTA
Python守护进程(daemon)代码实例
2015/03/06 Python
Python实现按特定格式对文件进行读写的方法示例
2017/11/30 Python
详解Django中间件执行顺序
2018/07/16 Python
Python实现的建造者模式示例
2018/08/06 Python
numpy向空的二维数组中添加元素的方法
2018/11/01 Python
Python编程在flask中模拟进行Restful的CRUD操作
2018/12/28 Python
对python列表里的字典元素去重方法详解
2019/01/21 Python
pyenv与virtualenv安装实现python多版本多项目管理
2019/08/17 Python
python实现静态web服务器
2019/09/03 Python
Python实现转换图片背景颜色代码
2020/04/30 Python
Python之Matplotlib文字与注释的使用方法
2020/06/18 Python
python复合条件下的字典排序
2020/12/18 Python
python解包用法详解
2021/02/17 Python
2014年道德讲堂实施方案
2014/03/05 职场文书
可口可乐广告词
2014/03/20 职场文书
一帮一活动总结
2014/05/08 职场文书
企业标语大全
2014/07/01 职场文书
幼儿园辞职信
2015/05/13 职场文书
孩子满月酒答谢词
2015/09/30 职场文书
JS 基本概念详细介绍
2021/10/16 Javascript