Example of the title attribute of a imitated by jquery, jquerytitle

Example of the title attribute of a imitated by jquery, jquerytitle

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> location: Zhengzhou </p> <p> recruitment: 21 </p> </div> </li> <a href = ""> front-end development engineer </a> <div class = "show"> <p> department: technical Department </p> <p> location: Zhengzhou </p> <p> recruitment: 21 </p> </div> </li> <a href = ""> O & M engineer </a> <div class = "show"> <p> department: technical Department </p> <p> location: Zhengzhou </p> <p> recruitment: 21 </p> </div> </li> <a href = ""> R & D Engineer </a> <div class = "show"> <p> department: technical Department </p> <p> location: Zhengzhou </p> <p> recruitment: 21 </p> </div> </li> <a href = ""> UI Designer </a> <div class = "show"> <p> department: technical Department </p> <p> location: Zhengzhou </p> <p> recruitment: 21 </p> </div> </li> <a href = ""> front-end development engineer </a> <div class = "show"> <p> department: technical Department </p> <p> location: Zhengzhou </p> <p> recruitment: 21 </p> </div> </li> <a href = ""> O & M engineer </a> <div class = "show"> <p> department: technical Department </p> <p> location: Zhengzhou </p> <p> recruitment: 21 </p> </div> </li> <a href = ""> R & D Engineer </a> <div class = "show"> <p> department: technical Department </p> <p> location: Zhengzhou </p> <p> recruitment: 21 </p> </div> </li> <a href = ""> UI Designer </a> <div class = "show"> <p> department: technical Department </p> <p> location: Zhengzhou </p> <p> recruitment: 21 </p> </div> </li> <a href = ""> front-end development engineer </a> <div class = "show"> <p> department: technical Department </p> <p> location: Zhengzhou </p> <p> recruitment: 21 </p> </div> </li> <a href = ""> O & M engineer </a> <div class = "show"> <p> department: technical Department </p> <p> location: Zhengzhou </p> <p> recruitment: 21 </p> </div> </li> <a href = ""> R & D Engineer </a> <div class = "show"> <p> department: technical Department </p> <p> location: Zhengzhou </p> <p> recruitment: 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 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 topmargin-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;

For jquery JS question, click A and get the value of the title attribute. How can I obtain this value out of the function?

<Script> var value; $ (document ). ready (function () {$ ('ul li '). click (function () {value = $ (this ). attr ("title") ;}) if (value) alert (value) </script>

Title attribute of css

Use the program to implement the loop.
If you want to retain the title on a static page,
There is only one write.