首頁 > 開發者 > JavaScript
CSS如何?超連結背景切換，css超連結背景
CSS如何?超連結背景切換:
建議:儘可能的手寫代碼，可以有效提高學習效率和深度。
相當數量的網站在導覽列都有如此效果:當滑鼠放在導覽列目上，背景圖片會發生變化，移開之後又會還原原來的背景圖片。下面簡單介紹一下如何?此效果。代碼執行個體如下:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>螞蟻部落</title><style type="text/css">div{ height:28px; width:300px; border-bottom:3px solid #E10001;}ul{ list-style:none; margin:0px; padding:0px;}ul li{ float:left; width:87px; height:28px; margin-left:2px; display:inline;}ul li a{ width:87px; height:28px; display:block; font-size:14px; text-align:center; line-height:28px; text-decoration:none; color:#333; background:url(mytest/demo/bg1.gif) no-repeat;}ul li a:hover{ background:url(mytest/demo/bg2.gif) no-repeat;}</style></head><body><div> <ul> <li><a href="#">CSS專區</a></li> <li><a href="#">JS專區</a></li> <li><a href="#">HTML專區</a></li> </ul></div></body></html>
以上代碼實現了我們的要求。實現的過程非常簡單:
第一步，將超連結的預設狀態下設定一個背景圖片。
第二部，在滑鼠放到超連結上的時候設定成另一張背景圖片。
注意:a元素必需要轉換成區塊層級元素，否則無法設定高度和寬度。
背景圖片也是可以合并在一張圖片上，相關內容可以參閱CSS如何將背景圖片合并在一張圖片上一章節。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=4683
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
