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

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

WBOY

Release： 2016-05-16 17:43:20

Original

1078 people have browsed it

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;
The title attribute of a imitated by jquery (compatible with ie6/7)_jquery