水平導覽列-應用版 CSS 定位 滑鼠經過 換圖

滑鼠離開

滑鼠經過

圖檔全部集合在一大張，透過 CSS 定位來顯示圖片



<style type="text/css">
#nav ul {
width: 100%;
}
#nav ul li {
display: inline-block;
 vertical-align: top;
*zoom: 1;
 *display: inline;
}
.選單1 a{
background-image: url("圖檔路徑");
background-position: 0px 0px;
width: 65px;
height: 51px;
display: inline-block;
}
.選單1 a:hover{
background-image: url("圖檔路徑");
background-position: 0px -30px;
width: 65px;
height: 51px;
display: inline-block;
}
.選單2 a{
background-image: url("圖檔路徑");
background-position: -70px 0px;
width: 65px;
height: 51px;
display: inline-block;
}
.選單2 a:hover{
background-image: url("圖檔路徑");
background-position: -70px -30px;
width: 65px;
height: 51px;
display: inline-block;
}
.選單3 a{
background-image: url("圖檔路徑");
background-position: -140px 0px;
width: 65px;
height: 51px;
display: inline-block;
}
.選單3 a:hover{
background-image: url("圖檔路徑");
background-position: -140px -30px;
width: 65px;
height: 51px;
display: inline-block;
}
.選單4 a{
background-image: url("圖檔路徑");
background-position: -210px 0px;
width: 65px;
height: 51px;
display: inline-block;
}
.選單4 a:hover{
background-image: url("圖檔路徑");
background-position: -210px -30px;
width: 65px;
height: 51px;
display: inline-block;
}
</style>


<!-- html 語法 -->

<div id="nav">

      <ul>
   
        <li><span class="選單1" title="選單1" name="menu1" id="menu1"><a href="連結網址或檔案"></a></span></li>

        <li><span class="divided" ></span></li>
   
        <li><span class="選單2" title="選單2" name="menu2" id="menu2><a href="連結網址或檔案"></a></span></li>

        <li><span class="divided" ></span></li>
   
        <li><span class="選單3 title="選單3" name="menu3" id="menu3" ><a href="連結網址或檔案"></a></span></li>

        <li><span class="divided" ></span></li>
   
        <li><span class="選單4" title="選單4" name="menu4" id="menu4" ><a href="連結網址或檔案" ></a></span></li>

  </ul>

</div>