溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“怎么用CSS制作當鼠標經過時會變色的菜單欄”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
CSS樣式為：
代碼如下:
<style type="text/css">
#navigation
{
width:200px;
font-family:Arial;
}
#navigation ul
{
list-style-type:none; /* 不顯示項目符號*/
margin:0px;
padding:0px;
text-decoration:none;
}
#navigation li
{
border-bottom:1px solid #ED9F9F; /* 添加標簽<li>的下劃線*/
}
#navigation li a
{
display:block; /* 區(qū)塊顯示*/
padding:5px 5px 5px 0.5em;
text-decoration:none;
border-left:12px solid #711515; /* 左邊的粗紅邊*/
border-right:1px solid #711515; /* 右側陰影*/
}
#navigation li a:link,#navigation li a:visited /* 超鏈接正常狀態(tài)、被訪問過的狀態(tài)*/
{
background-color:#c11136; /* 設置背景色*/
color:#FFFFFF; /* 設置文字顏色*/
}
#navigation li a:hover /*鼠標經過時*/
{
background-color:#990020; /* 改變背景色*/
color:#ffff00; /* 改變文字顏色*/
}
</style>
HTML前臺代碼：
代碼如下:
<body>
<form id="form1" runat="server">
<div id="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Sports</a></li>
<li><a href="#">Weather</a></li>
<li><a href="#">Contact Me</a></li>
</ul>
</div>
</form>
</body>
初始效果： 
鼠標經過效果： 
“怎么用CSS制作當鼠標經過時會變色的菜單欄”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
