用jquery模仿的a的title属性
来源:互联网 发布:淘宝网处罚考试2017 编辑:程序博客网 时间:2024/06/05 07:38
用jQuery实现的模仿a的title属性的例子,在测试的时候ie6,7上出现了层次混乱,不过最终解决了。
源代码下载地址:http://download.csdn.net/my
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属性
- a标签的title属性
- 超链接a的属性title
- a标签的title属性
- 修改 jquery dialog的title属性
- 修改 jquery dialog的title属性
- Table的title属性
- HTML的title属性
- input的title属性
- div、a等标签title属性的换行
- Div、A等标签title属性的换行
- cppquery:用C++模仿jquery的探索
- 文字链接的title属性
- 设置navbar的title属性
- link 标签的 title 属性
- html元素的title属性
- js 模仿jquery的写法
- 模仿JQuery的简单Demo
- html5游戏开发-愤怒的小鸟-开源讲座(三)-碰撞产生的冲力
- 【php】php伪静态的四种方法总结
- php导入csv文件
- 交叉编译场景分析(arm-linux)--序
- 用MATLAB实现领域平均法抑制噪声程序(线性滤波器)
- 用jquery模仿的a的title属性
- 调用函数判断是否为素数
- C++学习重点分析
- ASP.Net访问母版页(MasterPage)控件、属性、方法及母版页中调用内容页,获取用户自定义控件里面的子控件的方法
- Building Coder(Revit 二次开发) - 空闲事件(Idling Event)增强和外部事件(External Event)
- 41期领测软件测试沙龙(北京站)圆满结束(现场视频下载)
- 梯度,阈值梯度,二值化
- ORA-06512 DBMS_LOB.LOADCLOBFROMFILE处理经验
- 【php】php函数array_shift()在删除数组元素中的用法