模拟实现链接title效果代码实例

时间：2015-07-23 13:50:36 阅读：209 评论：0 收藏：0 [点我收藏+]

标签：

模拟实现链接title效果代码实例:

自带的的链接的title属性的效果确实太难看了，对没关效果要求稍高的网站都要进行自定义的title效果，下面就介绍一下jquery如何实现此效果，代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>蚂蚁部落</title>
<style type="text/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;
}
.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;
  margin-left:60px;
}
.show p 
{
  height:18px;
  line-height:18px;
}
.list li a:hover 
{
  text-decoration:underline;
  color:#FF0000;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<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>
</head>
<body>
<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>
</body>
</html>

原文地址是:http://www.51texiao.cn/jqueryjiaocheng/2015/0612/4001.html

最为原始地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=8285

模拟实现链接title效果代码实例

标签：

原文地址：http://www.cnblogs.com/nulifendou/p/4670204.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行