Title attribute of a imitated by jquery

An example of imitating the title attribute of a implemented by jQuery. During the test, the levels of ie6 and 7 were disordered, but the final solution was solved.

 
The html code is as follows:

<Div class = "wrap">
<Ul class = "list clearfix">
<Li> <a href = ""> UI Designer </a>
<Div class = "show">
<P> Department: Technical Department </p>
<P> Work Location: Zhengzhou </p>
<P> Number of recruits: 21 </p>
</Div>
</Li>
<Li> <a href = ""> front-end development engineer </a>
<Div class = "show">
<P> Department: Technical Department </p>
<P> Work Location: Zhengzhou </p>
<P> Number of recruits: 21 </p>
</Div>
</Li>
<Li> <a href = ""> O & M engineer </a>
<Div class = "show">
<P> Department: Technical Department </p>
<P> Work Location: Zhengzhou </p>
<P> Number of recruits: 21 </p>
</Div>
</Li>
<Li> <a href = ""> R & D Engineer </a>
<Div class = "show">
<P> Department: Technical Department </p>
<P> Work Location: Zhengzhou </p>
<P> Number of recruits: 21 </p>
</Div>
</Li>
<Li> <a href = ""> UI Designer </a>
<Div class = "show">
<P> Department: Technical Department </p>
<P> Work Location: Zhengzhou </p>
<P> Number of recruits: 21 </p>
</Div>
</Li>
<Li> <a href = ""> front-end development engineer </a>
<Div class = "show">
<P> Department: Technical Department </p>
<P> Work Location: Zhengzhou </p>
<P> Number of recruits: 21 </p>
</Div>
</Li>
<Li> <a href = ""> O & M engineer </a>
<Div class = "show">
<P> Department: Technical Department </p>
<P> Work Location: Zhengzhou </p>
<P> Number of recruits: 21 </p>
</Div>
</Li>
<Li> <a href = ""> R & D Engineer </a>
<Div class = "show">
<P> Department: Technical Department </p>
<P> Work Location: Zhengzhou </p>
<P> Number of recruits: 21 </p>
</Div>
</Li>
<Li> <a href = ""> UI Designer </a>
<Div class = "show">
<P> Department: Technical Department </p>
<P> Work Location: Zhengzhou </p>
<P> Number of recruits: 21 </p>
</Div>
</Li>
<Li> <a href = ""> front-end development engineer </a>
<Div class = "show">
<P> Department: Technical Department </p>
<P> Work Location: Zhengzhou </p>
<P> Number of recruits: 21 </p>
</Div>
</Li>
<Li> <a href = ""> O & M engineer </a>
<Div class = "show">
<P> Department: Technical Department </p>
<P> Work Location: Zhengzhou </p>
<P> Number of recruits: 21 </p>
</Div>
</Li>
<Li> <a href = ""> R & D Engineer </a>
<Div class = "show">
<P> Department: Technical Department </p>
<P> Work Location: Zhengzhou </p>
<P> Number of recruits: 21 </p>
</Div>
</Li>

</Ul>
</Div>

The css 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 for positioning, li directly duplicates the content of the parent element.
}
. List li {
List-style: none;
Width: 100px;
Height: 24px;
Line-height: 24px;
Margin-right: 10px;
Float: left;
}
. List li {
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:

<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>

Preview the effect;