close
範例可以到(Click)，最上面的選單觀看，紅色圖檔的那個。

先在css裡加入語法：
  1. /*選單語法*/
  2. div#links {
  3. position: absolute;
  4. left:100px;
  5. top:100px;
  6. border: 1px solid #eee;
  7. font-size : 10px;
  8. }
  9.  
  10. div#links a{
  11. text-decoration:none;
  12. background: #fff;
  13. padding:3px;
  14. color:#a10000;
  15. padding:5px;
  16. }
  17.  
  18. div#links a:hover{
  19. background: #ccc;
  20. color: #000;
  21. }
  22.  
  23. /*選單說明的語法*/
  24. div#links a span{
  25. display: none;
  26. }
  27.  
  28. div#links a:hover span{
  29. display: block;
  30. position: absolute;
  31. top: 20px;
  32. left: 50px;
  33. width: 50px;
  34. height:50px;
  35. padding: 5px;
  36. color: #000;
  37. font-size : 10px;
  38. }

說明：
第25行：隱藏滑鼠未經過連結時的說明文字


要呈現效果的地方加上

  1. <div id="links">
  2. <a href="#">選單1<span>選單1的說明</span></a><br />
  3. <a href="#">選單2<span>選單2的說明</span></a><br />
  4. </div>
arrow
arrow
    全站熱搜
    創作者介紹
    創作者 studynote 的頭像
    studynote

    木の學習誌

    studynote 發表在 痞客邦 留言(1) 人氣()

    E-mail轉寄