練習前端技術學院的任務，需要實現“導航欄中的鏈接，隨着鼠標懸浮的位置，相應的鏈接下出現紅色線段”的效果（如圖1），我的理解有簡易與稍顯復雜一些的方法：
首先想到的就是直接利用偽元素，改變其底邊框狀態即可。對應的代碼及效果如下:
1 <html> 2 <head></head> 3 <body> 4 <div> 5 <ul> 6 <li><a href="#" class="Link-tit"><i>首頁</i></a></li> 7 <li><a href="#" class="Link-tit"><i>最新活動</i></a></li> 8 <li><a href="#" class="Link-tit"><i>項目介紹</i></a></li> 9 <li><a href="#" class="Link-tit"><i>愛心社區</i></a></li> 10 <li><a href="#" class="Link-tit"><i>關於我們</i></a></li> 11 <li><a href="#" class="Link-tit"><i>登錄</i></a></li> 12 </ul> 13 </div> 14 </body> 15 </html>
css為：
1 ul li{ 2 width:120px; 3 float:left; 4 } 5 ul{ 6 list-style-type:none; 7 } 8 div{float:right;/*實現整體的右對齊布局} 9 a:hover{ 10 color:red; 11 border-bottom:3px solid red;/*實現鼠標懸浮時對應鏈接高亮紅色且有紅色底邊框效果*/ 12 }
此方法就沒有了平滑的動作（動畫效果），其效果如圖：
另一方法是用CSS3屬性transition（過渡）實現，思路是利用該屬性指定鼠標動作時變化的具體屬性以及時間來控制其變化，用一個空的<li>放置變化的紅色底線，具體代碼如下：
<html> <head></head> <body> <div class="navigation"> <!--頁眉導航欄--> <ul> <li><a href="#" class="Link-tit"><i>首頁</i></a></li> <li><a href="#" class="Link-tit"><i>最新活動</i></a></li> <li><a href="#" class="Link-tit"><i>項目介紹</i></a></li> <li><a href="#" class="Link-tit"><i>愛心社區</i></a></li> <li><a href="#" class="Link-tit"><i>關於我們</i></a></li> <li><a href="#" class="Link-tit"><i>登錄</i></a></li> <li class="move"></li> <!--利用一個空的<li>標簽設置選中下划線--> </ul> </div> </body> </html>
CSS代碼如下：
1 .head a{text-decoration:none;/*去除a自帶的下划線*/} 2 ul{list-style-type:none;position:relative;} 3 .Link-tit:hover{color:red;}/*偽元素實現當鼠標停在鏈接上高亮顯示*/ 4 ul li{width:110px;float:left;line-height:20px;} 5 .move{border-bottom:3px solid red;position:absolute;left:0px;top:30px; 6 transition:left .2s ease-in-out 0s; /*transition中的left值為.move類事件觸發時隨鼠標變化的屬性*/ 7 -webkit-transition:left .2s ease-in-out 0s; /*chrome/safari瀏覽器*/ 8 -moz-transition:left .2s ease-in-out 0s; /*firefox瀏覽器*/ 9 -o-transition:left .2s ease-in-out 0s;} /*opera瀏覽器*/ 10 li:nth-child(1):hover~.move{left:0px;} 11 li:nth-child(2):hover~.move{left:110px;} 12 li:nth-child(3):hover~.move{left:220px;} 13 li:nth-child(4):hover~.move{left:330px;} 14 li:nth-child(5):hover~.move{left:440px;} 15 li:nth-child(6):hover~.move{left:550px;}
其中，:nth-child(n)為子代選擇器，此處表示各個鏈接，prev~slibings表示同輩元素，改變.move的left值，即可改變已經脫離文檔流的下划線的位置，從而達到效果（見圖一）。
transition：property(要進行過渡的屬性) duration（過渡時間） timing-function（過渡變化曲線） delay(過渡開始時間)