Html中滑鼠懸停顯示二級選單的兩種方法

八十年代的金壇縣發表於2017-01-20
HTML
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <style type="text/css">
  7. ul{
  8. list-style: none;
  9. float: left;
  10. }
  11. li{
  12. display: none;
  13. }
  15. </style>
  16. <script type="text/javascript">
  17. function disp(){
  18. for(var i = 0; i<3; i++){
  19. document.getElementsByClassName('sss')[i].style.display='block';
  20. }
  22. }
  23. function out(){
  24. for(var i = 0; i<3; i++){
  25. document.getElementsByClassName('sss')[i].style.display='none';
  26. }
  27. }
  28. </script>
  29. </head>
  30. <body>
  31. <ul onmouseover="disp()" onmouseout="out()"> 手機數碼
  32. <li class="sss">iPhone</li>
  33. <li class="sss">SAMSUNG</li>
  34. <li class="sss">SAMSUNG</li>
  35. </ul>
  36. </body>
  37. </html>
 
方法二
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <style type="text/css">
  7. li:hover #b{
  8. display: block;
  9. }
  10. #b{
  11. display: none;
  12. }
  13. </style>
  14. </head>
  15. <body>
  16. <ul>
  17. <li>sss
  18. <ul id="b">
  19. <li ></li>
  20. <li ></li>
  21. <li ></li>
  22. <li ></li>
  23. </ul>
  24. </li>
  25. </ul>
  26. </body>
  27. </html>

相關文章