快捷導(dǎo)航

jQuery實(shí)現(xiàn)鼠標(biāo)經(jīng)過時(shí)出現(xiàn)隱藏層文字鏈接的方法

更新時(shí)間：2015年10月12日 09:49:45 作者：企鵝

這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)經(jīng)過時(shí)出現(xiàn)隱藏層文字鏈接的方法,涉及jQuery鼠標(biāo)hover事件的響應(yīng)及頁(yè)面元素的動(dòng)態(tài)處理技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了jQuery實(shí)現(xiàn)鼠標(biāo)經(jīng)過時(shí)出現(xiàn)隱藏層文字鏈接的方法。分享給大家供大家參考。具體如下：

這里演示Jquery顯示隱藏層的方法，鼠標(biāo)經(jīng)過時(shí)出現(xiàn)文字鏈接，模擬評(píng)分效果，這里沒有加動(dòng)作，僅顯示了前臺(tái)效果的實(shí)現(xiàn)。

運(yùn)行效果截圖如下：

在線演示地址如下：

http://demo.jb51.net/js/2015/jquery-mouse-over-show-txt-demo/

具體代碼如下：

<!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>JQ顯示隱藏層，鼠標(biāo)經(jīng)過時(shí)出現(xiàn)文字鏈接</title>
<style>.list span{display:none}</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(function(){
 $(".list li").hover(function(){
  $(this).find("span").show();
 },function(){
  $(this).find("span").hide();
 });
});
</script>
</head>
<body>
<ul class="list">
 <li><a href="#">文字鏈接</a>　<em>顯示</em>　<span><a href="#">好評(píng)</a> <a href="#">中評(píng)</a> <a href="#">差評(píng)</a></span></li>
 <li><a href="#">文字鏈接</a>　<em>顯示</em>　<span><a href="#">好評(píng)</a> <a href="#">中評(píng)</a> <a href="#">差評(píng)</a></span></li>
 <li><a href="#">文字鏈接</a>　<em>顯示</em>　<span><a href="#">好評(píng)</a> <a href="#">中評(píng)</a> <a href="#">差評(píng)</a></span></li>
 <li><a href="#">文字鏈接</a>　<em>顯示</em>　<span><a href="#">好評(píng)</a> <a href="#">中評(píng)</a> <a href="#">差評(píng)</a></span></li>
 <li><a href="#">文字鏈接</a>　<em>顯示</em>　<span><a href="#">好評(píng)</a> <a href="#">中評(píng)</a> <a href="#">差評(píng)</a></span></li>
</ul>
</body>
</html>

希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

jQuery制作效果超棒的手風(fēng)琴折疊菜單
這篇文章主要介紹了jQuery制作效果超棒的手風(fēng)琴折疊菜單的效果，這里推薦給大家，有需要的小伙伴可以參考下
2015-04-04
jQuery實(shí)現(xiàn)簡(jiǎn)單倒計(jì)時(shí)功能的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)簡(jiǎn)單倒計(jì)時(shí)功能的方法,涉及jQuery根據(jù)時(shí)間動(dòng)態(tài)操作頁(yè)面元素的相關(guān)技巧,需要的朋友可以參考下
2016-07-07
利用imgareaselect輔助后臺(tái)實(shí)現(xiàn)圖片上傳裁剪
這篇文章主要為大家詳細(xì)介紹了利用imgareaselect輔助后臺(tái)實(shí)現(xiàn)圖片裁剪的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-03-03
Jquery數(shù)字上下滾動(dòng)動(dòng)態(tài)切換插件
有時(shí)我們需要?jiǎng)討B(tài)的展示訪問次數(shù)、下載次數(shù)等效果，我們可以借助jQuery結(jié)合后臺(tái)php實(shí)現(xiàn)一個(gè)滾動(dòng)的數(shù)字展示效果。
2015-08-08
jquery實(shí)現(xiàn)九宮格大轉(zhuǎn)盤抽獎(jiǎng)
jQuery九宮格大轉(zhuǎn)盤抽獎(jiǎng)代碼網(wǎng)頁(yè)特效，點(diǎn)擊抽獎(jiǎng)按鈕開始隨機(jī)抽獎(jiǎng)選擇獎(jiǎng)品，可設(shè)置起點(diǎn)位置、獎(jiǎng)品數(shù)量、轉(zhuǎn)動(dòng)次數(shù)、中獎(jiǎng)位置參數(shù)
2015-11-11
jquery驗(yàn)證手機(jī)號(hào)是否正確實(shí)例講解
這篇文章主要介紹了一個(gè)jquery驗(yàn)證手機(jī)號(hào)是否正確的實(shí)踐案例，利用正則表達(dá)式進(jìn)行驗(yàn)證，感興趣的小伙伴們可以參考一下
2015-11-11
jQuery的學(xué)習(xí)步驟
首先我建議大家去看看<JQUERY實(shí)戰(zhàn)>這本書，稍后我會(huì)提供本書的jquery實(shí)戰(zhàn)PDF版本。能省點(diǎn)銀子最好啊。
2011-02-02
jQuery.get、jQuery.getJSON、jQuery.post無法返回JSON問題的解決方法
在WEB項(xiàng)目中，經(jīng)常會(huì)使用到j(luò)Query進(jìn)行AJAX請(qǐng)求，但是自從使用了.net 3.5以后，以往寫的請(qǐng)求語(yǔ)句就有些小問題了，就是返回的始終是xml,而并不是JSON
2011-07-07
基于jquery實(shí)現(xiàn)動(dòng)態(tài)豎向柱狀條特效
很多數(shù)據(jù)統(tǒng)計(jì)效果中，柱狀條方式的算是比較常見的一種，形象直觀，下面就是一段能夠?qū)崿F(xiàn)此功能的代碼實(shí)例，并且具有一定的動(dòng)態(tài)效果，感興趣的朋友可以參考一下
2016-02-02
js實(shí)現(xiàn)表格篩選功能
本文主要介紹了js實(shí)現(xiàn)表格篩選功能的代碼。具有一定的參考價(jià)值，下面跟著小編一起來看下吧
2017-01-01