jquery實(shí)現(xiàn)導(dǎo)航菜單鼠標(biāo)提示功能
Apr 25, 2018 am 10:55 AM
這次給大家?guī)?lái)jquery實(shí)現(xiàn)導(dǎo)航菜單鼠標(biāo)提示功能，jquery實(shí)現(xiàn)導(dǎo)航菜單鼠標(biāo)提示功能的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來(lái)看一下。
這是一個(gè)奇妙的導(dǎo)航菜單鼠標(biāo)提示特效，俗稱“鏈接提示”，鼠標(biāo)放在導(dǎo)航菜單的鏈接上即可顯示出該鏈接所指向網(wǎng)頁(yè)的大致內(nèi)容，提示用戶到達(dá)需要的頁(yè)面。
先來(lái)看看運(yùn)行效果截圖：
具體代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>鏈接提示特效</title>
<script type="text/javascript" src="jquery1.3.2.js"></script>
<script type="text/javascript">?
$(document).ready(function(){
?$(".menu?a").hover(function()?{
??$(this).next("em").animate({opacity:?"show",?top:?"-75"},?"slow");
?},?function()?{
??$(this).next("em").animate({opacity:?"hide",?top:?"-85"},?"fast");
?});
});
</script>
<style type="text/css">?
body?{
?margin:?10px?auto;
?width:?570px;
?font:?75%/120%?Arial,?Helvetica,?sans-serif;
}
.menu?{
?margin:?100px?0?0;
?padding:?0;
?list-style:?none;
}
.menu?li?{
?padding:?0;
?margin:?0?2px;
?float:?left;
?position:?relative;
?text-align:?center;
}
.menu?a?{
?padding:?14px?10px;
?display:?block;
?color:?#000000;
?width:?144px;
?text-decoration:?none;
?font-weight:?bold;
?background:?url(images/button.gif)?no-repeat?center?center;
}
.menu?li?em?{
?background:?url(images/hover.png)?no-repeat;
?width:?180px;
?height:?45px;
?position:?absolute;
?top:?-85px;
?left:?-15px;
?text-align:?center;
?padding:?20px?12px?10px;
?font-style:?normal;
?z-index:?2;
?display:?none;
}
</style>
</head>
<body>
<ul class="menu">
?<li>
??<a href="http://www.baidu.com">Web?Designer?Wall</a>??
??<em>A?wall?of?design?ideas,?web?trends,?and?tutorials</em>
?</li>
?<li>
??<a href="#">Best?Web?Gallery</a>
??<em>Featuring?the?best?CSS?and?Flash?web?sites</em>
?</li>
?<li>
??<a href="#">N.Design?Studio</a>
??<em>Blog?and?design?portfolio?of?WDW?designer,?Nick?La</em>
?</li>
</ul>
</body>
</html>
相信看了本文案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
推薦閱讀：
jQuery實(shí)現(xiàn)表單里文字按鈕特效合集
Jquery實(shí)現(xiàn)打開(kāi)頁(yè)面隨機(jī)選擇切換
以上是jquery實(shí)現(xiàn)導(dǎo)航菜單鼠標(biāo)提示功能的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！
熱AI工具
Undress AI Tool
免費(fèi)脫衣服圖片
Undresser.AI Undress
人工智能驅(qū)動(dòng)的應(yīng)用程序，用于創(chuàng)建逼真的裸體照片
AI Clothes Remover
用于從照片中去除衣服的在線人工智能工具。
Clothoff.io
AI脫衣機(jī)
Video Face Swap
使用我們完全免費(fèi)的人工智能換臉工具輕松在任何視頻中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費(fèi)的代碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
功能強(qiáng)大的PHP集成開(kāi)發(fā)環(huán)境
Dreamweaver CS6
視覺(jué)化網(wǎng)頁(yè)開(kāi)發(fā)工具
SublimeText3 Mac版
神級(jí)代碼編輯軟件(SublimeText3)
Win11怎么禁用任務(wù)欄縮略圖預(yù)覽? 關(guān)閉鼠標(biāo)移動(dòng)任務(wù)欄圖標(biāo)顯示縮略圖技巧
Feb 29, 2024 pm 03:20 PM
本文將介紹如何在Win11系統(tǒng)中關(guān)閉鼠標(biāo)移動(dòng)任務(wù)欄圖標(biāo)時(shí)顯示的縮略圖功能。這一功能在默認(rèn)情況下是開(kāi)啟的，當(dāng)用戶將鼠標(biāo)指針懸停在任務(wù)欄上的應(yīng)用程序圖標(biāo)上時(shí)，會(huì)顯示該應(yīng)用程序的當(dāng)前窗口縮略圖。然而，有些用戶可能覺(jué)得這個(gè)功能不太實(shí)用或者會(huì)干擾到他們的使用體驗(yàn)，因此想要關(guān)閉它。任務(wù)欄縮略圖可能很有趣，但它們也可能分散注意力或煩人。考慮到您將鼠標(biāo)懸停在該區(qū)域的頻率，您可能無(wú)意中關(guān)閉了重要窗口幾次。另一個(gè)缺點(diǎn)是它使用更多的系統(tǒng)資源，因此，如果您一直在尋找一種提高資源效率的方法，我們將向您展示如何禁用它。不過(guò)
雷蛇 | 寶可夢(mèng)耿鬼款無(wú)線鼠標(biāo)、鼠標(biāo)墊上架，套裝價(jià) 1549 元
Jul 19, 2024 am 04:17 AM
本站7月12日消息，雷蛇今日宣布推出雷蛇|寶可夢(mèng)耿鬼款無(wú)線鼠標(biāo)、鼠標(biāo)墊。其單品定價(jià)分別為1299元和299元，包含兩款產(chǎn)品的套裝價(jià)則為1549元。這并非雷蛇首次推出耿鬼聯(lián)名的外設(shè)產(chǎn)品，2023年雷蛇就推出過(guò)耿鬼款的八岐大蛇V2游戲鼠標(biāo)。此次推出兩款新品整體均采用與鬼斯、鬼斯通、耿鬼家族外觀類似的深紫色底色，印有這三只寶可夢(mèng)和精靈球的線條輪廓，中間則為耿鬼這一經(jīng)典幽靈屬性寶可夢(mèng)的彩色大圖。本站發(fā)現(xiàn)，雷蛇|寶可夢(mèng)耿鬼款無(wú)線鼠標(biāo)基于此前發(fā)布的毒蝰V3專業(yè)版打造。其整體重量為55g，搭載雷蛇第二代FOC
惠普推出 Professor 1 三模輕音鼠標(biāo)：4000DPI、藍(lán)影 RAW3220，首發(fā)價(jià) 99 元
Apr 01, 2024 am 09:11 AM
本站3月31日消息，惠普近日在京東上架了一款Professor1三模藍(lán)牙鼠標(biāo)，可選黑白奶茶色，首發(fā)價(jià)99元，需要支付10元定金。據(jù)介紹，這款鼠標(biāo)重量106克，采用人體工程學(xué)設(shè)計(jì)，尺寸為127.02x79.59x51.15mm，可選七檔4000DPI，搭載藍(lán)影RAW3220傳感器，使用650毫安時(shí)電池，號(hào)稱一次充電續(xù)航可以使用2個(gè)月。本站附鼠標(biāo)參數(shù)信息如下：
VGN 聯(lián)名《艾爾登法環(huán)》鍵鼠系列產(chǎn)品上架：菈妮 / 褪色者定制主題，首發(fā) 99 元起
Aug 12, 2024 pm 10:45 PM
本站8月12日消息，VGN于8月6日推出了聯(lián)名《艾爾登法環(huán)》鍵鼠系列產(chǎn)品，包含鍵盤、鼠標(biāo)和鼠標(biāo)墊，采用菈妮/褪色者定制主題設(shè)計(jì)，目前系列產(chǎn)品已上架京東，售價(jià)99元起。本站附聯(lián)名新品信息如下：VGN丨艾爾登法環(huán)S99PRO鍵盤該鍵盤采用純鋁合金外殼，輔以五層消音結(jié)構(gòu)，使用GASKET板簧結(jié)構(gòu)，擁有單鍵開(kāi)槽PCB、原廠高度PBT材質(zhì)鍵帽、鋁合金個(gè)性化背板；支持三模連接和SMARTSPEEDX低延遲技術(shù)；接入VHUB，可一站式管理多款設(shè)備，首發(fā)549元。VGN丨艾爾登法環(huán)F1PROMAX無(wú)線鼠標(biāo)該鼠標(biāo)
雷蛇鼠標(biāo)驅(qū)動(dòng)在哪個(gè)文件夾
Mar 02, 2024 pm 01:28 PM
很多用戶不知道自己雷蛇驅(qū)動(dòng)安裝的文件去了哪里，這些驅(qū)動(dòng)文件一般都是安裝在了系統(tǒng)盤，也就是電腦的C盤，具體位置在programfiles下的RAZE文件夾。雷蛇鼠標(biāo)驅(qū)動(dòng)在哪個(gè)文件夾答：在系統(tǒng)C盤的programfiles下的RAZE文件夾。一般驅(qū)動(dòng)都會(huì)安裝在C盤，按照位置去找就可以了。雷蛇鼠標(biāo)驅(qū)動(dòng)安裝方法介紹1、下載好官網(wǎng)的文件以后雙擊運(yùn)行自己下載的EXE文件。2、等待軟件加載。3、在這里可以選擇你要安裝的哪個(gè)驅(qū)動(dòng)。4、選擇好以后點(diǎn)擊右下角的“安裝”就可以了。
多彩推出 M900 Pro 無(wú)線游戲鼠標(biāo)：右手人體工學(xué)造型，8K Nano 接收器，199 元起
Mar 23, 2024 pm 05:16 PM
本站3月22日消息，Delux多彩推出M900Pro無(wú)線游戲鼠標(biāo)，使用右手人體工學(xué)造型，首發(fā)預(yù)售價(jià)199元起。多彩M900Pro使用右手人體工學(xué)設(shè)計(jì)，為中大手用戶打造，重63g，并噴有啞光UV涂層。該鼠標(biāo)使用PAW3395傳感器，原配Nano接收器支持8000Hz無(wú)線回報(bào)率，搭載環(huán)諾藍(lán)殼粉點(diǎn)微動(dòng)并標(biāo)配RGB充電底座與防滑貼。此外，該鼠標(biāo)還支持調(diào)節(jié)LOD、全鍵自定義、自定義波紋控制與直線修正等功能，配備PTFE腳墊，1.6m傘繩線，并內(nèi)置接收器收納倉(cāng)。本站總結(jié)該鼠標(biāo)具體參數(shù)如下：顏色：黑、白、紅傳
jQuery小技巧：快速修改頁(yè)面所有a標(biāo)簽的文本
Feb 28, 2024 pm 09:06 PM
標(biāo)題：jQuery小技巧：快速修改頁(yè)面所有a標(biāo)簽的文本在網(wǎng)頁(yè)開(kāi)發(fā)中，我們經(jīng)常需要對(duì)頁(yè)面中的元素進(jìn)行修改和操作。在使用jQuery時(shí)，有時(shí)候需要一次性修改頁(yè)面中所有a標(biāo)簽的文本內(nèi)容，這樣可以節(jié)省時(shí)間和精力。下面將介紹如何使用jQuery快速修改頁(yè)面所有a標(biāo)簽的文本，同時(shí)給出具體的代碼示例。首先，我們需要引入jQuery庫(kù)文件，確保在頁(yè)面中引入了以下代碼：<
使用jQuery修改所有a標(biāo)簽的文本內(nèi)容
Feb 28, 2024 pm 05:42 PM
標(biāo)題：使用jQuery修改所有a標(biāo)簽的文本內(nèi)容jQuery是一款流行的JavaScript庫(kù)，被廣泛用于處理DOM操作。在網(wǎng)頁(yè)開(kāi)發(fā)中，經(jīng)常會(huì)遇到需要修改頁(yè)面上鏈接標(biāo)簽（a標(biāo)簽）的文本內(nèi)容的需求。本文將介紹如何使用jQuery來(lái)實(shí)現(xiàn)這個(gè)目標(biāo)，并提供具體的代碼示例。首先，我們需要在頁(yè)面中引入jQuery庫(kù)。在HTML文件中添加以下代碼：
