這篇文章主要介紹了jQuery實現鼠標經過時出現隱藏層文字鏈接的方法,涉及jQuery鼠標hover事件的響應及頁面元素的動態處理技巧,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了jQuery實現鼠標經過時出現隱藏層文字鏈接的方法。分享給大家供大家參考。具體如下：
這里演示Jquery顯示隱藏層的方法，鼠標經過時出現文字鏈接，模擬評分效果，這里沒有加動作，僅顯示了前臺效果的實現。
具體代碼如下：
- <!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顯示隱藏層，鼠標經過時出現文字鏈接</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程序設計有所幫助。
新聞熱點
疑難解答
圖片精選
