当前位置：首页 > 代码实例 > html5 css3代码分类 > jQuery > jquery模拟链接title效果代码实例

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

 2020-03-18 20:54:43 
自带的的链接的title属性的效果确实太难看了，对外观要求稍高的网站都要进行自定义的title效果。
下面就介绍一下jquery如何实现此效果，代码实例如下:
   [ jQuery ] 运行代码    下载代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.51qianduan.com/" />
<title>自定义title效果-51前端</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>

            
            

                        
                        
                        
                        
                        
                        
             
            
            
            
            
            

            

                
代码描述：jquery模拟链接title。jquery模拟链接title效果代码实例

            

          

          

          
  
          
 下载全部 收藏 

          
  113    151  

          

          

          

                

      

      
      

        
用户评论

        

            

                
                                 

                  大牛，别默默的看了，快登录帮我点评一下吧！:)     
                  登录 | 
                  注册
                  

                                
                
                

                  
                

                
            

 			

			 
            
        

      

    

    

      

        

          

            
  522688 
              

                
                

                  
                

              

            

                         
            关注 
             
             
             
            

          
 TA的相关作品 >>更多 

          

            
          

                  

      

            

        
相关标签代码

        

          
        

      

  










 
   
   
   
   




    

        

            

            

                

                    

                        
                        

                            
XXX市XXXX区XXXXXXXXXX路0000号0000室

                            
753511799

                            
000-00000000

                        

                    

                

                

                    

                        关于我们
                        公司介绍
                        免费声明
                        用户条款
                        联系方式
                    

                

                

                    

                        网站地图
                        总站地图
                        内容地图
                        词库地图
                    

                

                

                

                    

                        战略合作
                        

                        暂无图片
                        暂无图片
                        

                    

                

            

        

    

    

        

            

                

                    

                        
Powered by 51qianduan 2.4.1 . Copyright ©  2015 - 2020 51前端  。 辽ICP备20007965号-3  。 Processed in 0.002104 second(s)

                    

                

                

                    
                

            

        

    
















	×
	

		
		
		

			
				
				QQ登录
			
			
				
				微信登录
			
			
				
				新浪登录
			

		

        
		
	

	






	×
	

	
51前端

	

		

		
注册

	

	

		
			
			QQ注册
		
		
			
			微信注册
		
		
			
			新浪注册
		

	

        
    
    

	





	×
	

	
绑定手机

	

		

        
请绑定手机号，在继续操作

	

		

		  

          
          

          

          
              

                

              

          
           

           

           
           
           
           
           
           
       

          

          
          

          
		  
          
          

		

        
    






	×
	

	
单次下载支付

	

		

	

		

		
应付金额：279元

        
支付完成后，回到下载页面，在进行下载

        

        

        

          
          
          
        

        
        支付宝支付
        
        
使用微信扫码付款

        


    	

        

          
          
          
        

        
        微信支付
        
        
使用微信扫码付款

        

		

		

    









  
 

  
官方QQ群

  
意见反馈

  
  

    
 qq群
      
扫描上面二维码加微信群

    

      

  

    

      
 官方QQ群 

      

      

        
jQuery/js讨论群

          群号：642649996

        
Css3+Html5讨论群

          群号：322131262

      

      
加群请备注：从官网了解到