用jquery模仿的a的title屬性(兼容ie6/7)
更新時間：2013年01月21日 10:15:16 作者：
用jQuery實現的模仿a的title屬性的例子，在測試的時候ie6,7上出現了層次混亂，不過最終解決了,代碼書寫很詳細，感興趣的朋友可以了解下哦
用jQuery實現的模仿a的title屬性的例子，在測試的時候ie6,7上出現了層次混亂，不過最終解決了。
html代碼如下：
復制代碼 代碼如下:
<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="">前端開發(fā)工程師</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="">研發(fā)開發(fā)工程師</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="">前端開發(fā)工程師</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="">研發(fā)開發(fā)工程師</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="">前端開發(fā)工程師</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="">研發(fā)開發(fā)工程師</a>
<div class="show">
<p>所屬部門：技術部</p>
<p>工作地點：鄭州</p>
<p>招聘人數：21</p>
</div>
</li>
</ul>
</div>
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; //作為定位的父元素，li直接做父元素出現元素內容重疊問題
}
.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; //代替top
margin-left:60px; //代替left
}
.show p {
height:18px;
line-height:18px;
}
.list li a:hover {
text-decoration:underline;
color:#FF0000;
}
jQuery代碼如下：
復制代碼 代碼如下:
<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>
預覽效果;
相關文章
jQuery移動web開發(fā)之頁面跳轉和加載外部頁面的實現
這篇文章主要介紹了jQuery移動web開發(fā)之頁面跳轉和加載外部頁面的實現,以changePage()和loadPage()方法的使用為主,需要的朋友可以參考下2015-12-12
大家在做省市區(qū)下拉框聯動,或者是產品分類聯動,或者是部門聯動等下拉框時怎么做? 是用ajaxpro.dll 還是jquery ajax呢2010-12-12
本篇文章主要介紹了JQuery中解決重復動畫的辦法，有分別有圖片滾動輪播，回到頁面頂部，聯級菜單滑出，手風琴等效果，有需要的朋友可以來看一下。2016-10-10
項目需要實現一個無刷新批量文件上傳功能,仔細研究了下,發(fā)現JQuery 提供的Uploadify插件十分不錯,有興趣的可以了解一下。2017-01-01
jquery根據一個值來選中select下的option實例代碼
下面小編就為大家?guī)硪黄猨query根據一個值來選中select下的option實例代碼。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
ASP.NET jQuery 實例10 動態(tài)修改hyperlink的URL值
這節(jié)我們來看下如何實現通過選擇RadioButtonList值動態(tài)改變hyperlink控件的URL值，并簡要介紹bind和live方法的區(qū)別2012-02-02
日常生活中用手機，電腦瀏覽網頁時，滑到了頁面下端后想返回頂部 或 跳轉到頁面別的版塊，用鼠標滾動很麻煩，網頁電梯導航就可以很方便的精準到達目標版塊，本文給大家分享jquery電梯導航案例詳解，感興趣的朋友一起看看吧2022-05-05
基于Jquery的回車成tab焦點切換效果代碼(Enter To Tab )
基于Jquery的回車成tab焦點切換效果代碼(Enter To Tab )，需要的朋友可以參考下。2010-11-11
這篇文章主要介紹了使用jquery中height()方法獲取各種高度大全,比如瀏覽器高度、可視窗口高度、文檔高度等,需要的朋友可以參考下2014-04-04
jQuery1.6 類型判斷實現代碼，學習jquery的朋友可以參考下。2011-09-09