用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 相关文章推荐
asp.net HttpHandler实现图片防盗链
Nov 09 Javascript
jquery插件之easing 动态菜单
Aug 21 Javascript
js的一些常用方法小结
Jun 29 Javascript
javascript动态创建及删除元素的方法
Dec 22 Javascript
MVC Ajax Helper或Jquery异步加载部分视图
Nov 29 Javascript
AngularJS 中文API参考手册
Jul 28 Javascript
JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法
Dec 27 Javascript
Vue.js实现的计算器功能完整示例
Jul 11 Javascript
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
Oct 12 Javascript
jQuery实现可编辑的表格
Dec 11 jQuery
js 计算月/周的第一天和最后一天代码
Feb 01 Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
Aug 07 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求小于1000的所有水仙花数的代码
2012/01/10 PHP
在laravel中使用Symfony的Crawler组件分析HTML
2017/06/19 PHP
Laravel网站打开速度优化的方法汇总
2017/07/16 PHP
Laravel学习教程之request validation的编写
2017/10/25 PHP
PHP获取MySQL执行sql语句的查询时间方法
2018/08/21 PHP
jquery $.getJSON()跨域请求
2011/12/21 Javascript
Flexigrid在IE下不显示数据的处理的解决方法
2013/10/24 Javascript
Javascript核心读书有感之词法结构
2015/02/01 Javascript
浅谈angularjs中响应回车事件
2017/04/24 Javascript
easyUI下拉列表点击事件使用方法
2017/05/18 Javascript
在Vue组件化中利用axios处理ajax请求的使用方法
2017/08/25 Javascript
详解基于mpvue的小程序markdown适配解决方案
2018/05/08 Javascript
Vue Router的懒加载路径的解决方法
2018/06/21 Javascript
JavaScript中将值转换为字符串的五种方法总结
2019/06/06 Javascript
vue导航栏部分的动态渲染实例
2019/11/01 Javascript
nodejs环境使用Typeorm连接查询Oracle数据
2019/12/05 NodeJs
如何管理Vue中的缓存页面
2021/02/06 Vue.js
python多线程用法实例详解
2015/01/15 Python
自动化Nginx服务器的反向代理的配置方法
2015/06/28 Python
Django框架下在视图中使用模版的方法
2015/07/16 Python
python实现上传下载文件功能
2020/11/19 Python
python+matplotlib绘制饼图散点图实例代码
2018/01/20 Python
python使用sessions模拟登录淘宝的方式
2019/08/16 Python
python2与python3爬虫中get与post对比解析
2019/09/18 Python
解决python 读取 log日志的编码问题
2019/12/24 Python
Python经典五人分鱼实例讲解
2021/01/04 Python
使用CSS3的rem属性制作响应式页面布局的要点解析
2016/05/24 HTML / CSS
家得宝墨西哥官网:The Home Depot墨西哥
2019/11/18 全球购物
添柏岚英国官方网站:Timberland英国
2019/11/28 全球购物
Dr. Martens马汀博士法国官网:马丁靴鼻祖
2020/01/15 全球购物
医学毕业生自我鉴定
2013/10/30 职场文书
计算机毕业大学生求职信
2014/06/26 职场文书
教师思想作风整顿个人剖析材料
2014/10/10 职场文书
2016学习雷锋精神活动倡议书
2015/04/27 职场文书
2015年小学体育教师工作总结
2015/10/23 职场文书
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
2021/05/25 Vue.js