用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 相关文章推荐
javascript拓展DOM操作 prependChild insertAfert
Nov 17 Javascript
基于jquery的滚动鼠标放大缩小图片效果
Oct 27 Javascript
ie中js创建checkbox默认选中问题探讨
Oct 21 Javascript
jQuery中使用data()方法读取HTML5自定义属性data-*实例
Apr 11 Javascript
jQuery选择器总结之常用元素查找方法
Aug 04 Javascript
JavaScript中原型链存在的问题解析
Sep 25 Javascript
js实现自动图片轮播代码
Mar 22 Javascript
JS正则替换去空格的方法
Mar 24 Javascript
vue数据双向绑定的注意点
Jun 23 Javascript
js导出Excel表格超出26位英文字符的解决方法ES6
Nov 15 Javascript
微信小程序canvas截取任意形状的实现代码
Jan 13 Javascript
微信小程序清空输入框信息与实现屏幕往上滚动的示例代码
Jun 23 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读取本地文件常用函数(fopen与file_get_contents)
2013/09/09 PHP
PHP中判断变量为空的几种方法小结
2013/11/12 PHP
PHP获取数组的键与值方法小结
2015/06/13 PHP
thinkphp制作404跳转页的简单实现方法
2016/09/22 PHP
PHP基于rabbitmq操作类的生产者和消费者功能示例
2018/06/16 PHP
IE6与IE7中,innerHTML获取param的区别
2009/03/15 Javascript
jQuery html()等方法介绍
2009/11/18 Javascript
工作中常用到的JS表单验证代码(包括例子)
2010/11/11 Javascript
js,jquery滚动/跳转页面到指定位置的实现思路
2014/06/03 Javascript
浅谈被jQuery抛弃的函数及替代函数
2015/05/03 Javascript
js中对函数设置默认参数值的3种方法
2015/10/23 Javascript
学习AngularJs:Directive指令用法(完整版)
2016/04/26 Javascript
浅谈toLowerCase和toLocaleLowerCase的区别
2016/08/15 Javascript
vue + element-ui实现简洁的导入导出功能
2017/12/22 Javascript
nodejs中Express与Koa2对比分析
2018/02/06 NodeJs
vuejs项目打包之后的首屏加载优化及打包之后出现的问题
2018/04/01 Javascript
使用ESLint禁止项目导入特定模块的方法步骤
2019/03/04 Javascript
微信小程序组件传值图示过程详解
2019/07/31 Javascript
layui table 多行删除(id获取)的方法
2019/09/12 Javascript
js cavans实现静态滚动弹幕
2020/05/21 Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
2020/08/07 Javascript
用Python写一个无界面的2048小游戏
2016/05/24 Python
Python实现破解猜数游戏算法示例
2017/09/25 Python
python简单实现操作Mysql数据库
2018/01/29 Python
python用plt画图时,cmp设置方法
2018/12/13 Python
在pycharm中使用git版本管理以及同步github的方法
2019/01/16 Python
详解python中递归函数
2019/04/16 Python
python实现远程控制电脑
2019/05/23 Python
jupyter notebook 添加kernel permission denied的操作
2020/04/21 Python
CSS3贝塞尔曲线示例:创建链接悬停动画效果
2020/11/19 HTML / CSS
英国户外玩具儿童游乐设备网站:TP Toys(蹦床、攀爬框架、秋千、滑梯和游戏屋)
2018/04/09 全球购物
2015年秘书个人工作总结
2015/04/25 职场文书
党员学习中国梦心得体会
2016/01/05 职场文书
2016关于读书活动的心得体会
2016/01/14 职场文书
大学生创业计划书常用模板
2019/08/07 职场文书
python内置进制转换函数的操作
2021/06/02 Python