The title attribute of a imitated by jquery (compatible with ie6/7)_jquery

An example of imitating the title attribute of a using jQuery. During the test, there was a layer confusion on IE6 and 7, but it was finally solved.
The html code is as follows:

Copy the code The code is as follows:

• UI designer
  
  
  

  Department: Technology Department

  
  

  Working location: Zhengzhou

  
  < p>Number of recruits: 21

  
  
  
  


• Front-end development engineer
  
  
  

  Department: Technology Department

  
  

  Working location: Zhengzhou

  
  < ;p>Number of recruits: 21

  
  
  
  


• Operation and Maintenance Engineer
  
  

  Department: Technology Department

  
  

  Working location: Zhengzhou

  
  

  Number of recruits: 21

  
  
  
  


• R&D Development Engineer
  
  
  

  Department: Technology Department

  
  

  Workplace: Zhengzhou

  
  

  Number of recruits: 21

  
  
  
  


• UI designer< /a>
  
  
  

  Department: Technology Department

  
  

  Working location: Zhengzhou

  
  

  Number of recruits: 21

  
  
  
  


• Front-end development engineer< ;/a>
  
  
  

  Department: Technology Department

  
  

  Working location: Zhengzhou

  
  

  Number of recruits: 21

  
  
  
  


• Operation and Maintenance Engineer
  
  
  

  Department: Technology Department

  
  

  Workplace: Zhengzhou

  Number of recruits: 21

  
  
  
  


• R&D Engineer
  
  
  

  Department: Technology Department

  
  

  Working location: Zhengzhou
  

  Number of recruits: 21

  
  
  
  


• UI Designer
  
  
  

  Department: Technology Department

  
  

  Working location: Zhengzhou< /p>
  

  Number of recruits: 21

  
  
  
  


• Front-end development engineer
  
  
  

  Department: Technology Department

  
  

  Working location: Zhengzhou< ;/p>
  

  Number of recruits: 21

  
  
  
  


• 
  
  
  

  Department: Technology Department

  
  

  Working location: Zhengzhou

  
  

  Number of recruits: 21

  
  
  
  


• R&D Development Engineer
  
  
  

  Department: Technology Department

  
  

  Working location: Zhengzhou

  
  

  Number of recruits: 21

  
  
  
  

< /div>

The css code is as follows

Copy the code The code is as follows:

* {
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; //As the parent element of positioning, li is directly used as the parent element, and the element content overlaps.
}
.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; //replace top
margin-left:60px; //replace left
}
.show p {
height:18px;
line-height:18px;
}
.list li a: hover {
text-decoration:underline;
color:#FF0000;
}

The jQuery code is as follows:

Copy code The code is as follows:

Preview effect;

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn