這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)經(jīng)過時(shí)出現(xiàn)隱藏層文字鏈接的方法,涉及jQuery鼠標(biāo)hover事件的響應(yīng)及頁面元素的動態(tài)處理技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了jQuery實(shí)現(xiàn)鼠標(biāo)經(jīng)過時(shí)出現(xiàn)隱藏層文字鏈接的方法。分享給大家供大家參考。具體如下：
這里演示Jquery顯示隱藏層的方法，鼠標(biāo)經(jīng)過時(shí)出現(xiàn)文字鏈接，模擬評分效果，這里沒有加動作，僅顯示了前臺效果的實(shí)現(xià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>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="#">好評</a> <a href="#">中評</a> <a href="#">差評</a></span></li>
- <li><a href="#">文字鏈接</a> <em>顯示</em> <span><a href="#">好評</a> <a href="#">中評</a> <a href="#">差評</a></span></li>
- <li><a href="#">文字鏈接</a> <em>顯示</em> <span><a href="#">好評</a> <a href="#">中評</a> <a href="#">差評</a></span></li>
- <li><a href="#">文字鏈接</a> <em>顯示</em> <span><a href="#">好評</a> <a href="#">中評</a> <a href="#">差評</a></span></li>
- <li><a href="#">文字鏈接</a> <em>顯示</em> <span><a href="#">好評</a> <a href="#">中評</a> <a href="#">差評</a></span></li>
- </ul>
- </body>
- </html>
希望本文所述對大家的jQuery程序設(shè)計(jì)有所幫助。
新聞熱點(diǎn)
疑難解答
圖片精選
