###### tags:`ALPHACampWeek5_學期2-2` # hover&偽元素& 人工導覽列 # CSS hover ## 各種hover模式! [W3Schools online HTML editor](https://www.w3schools.com/cssref/tryit.asp?filename=trycss_sel_link_more1) ```css /* unvisited link */ a:link { color: green; } /* visited link */ a:visited { color: green; } /* mouse over link */ a:hover { color: red; } /* selected link */ a:active { color: yellow; } ``` # CSS偽元素 ```css a::before{ content: "( " attr(href) " ) < "; color:red; } a::after{ content: " > ( " attr(target) " ) "; color:green; } ``` ![](https://i.imgur.com/EiD20Dm.png) # 人工導覽列 [W3Schools online HTML editor](https://www.w3schools.com/cssref/tryit.asp?filename=trycss_sel_hover) ```html <!DOCTYPE html> <html> <head> <style> div {background-color: green;} div a { text-decoration: none; color: white; font-size: 20px; padding: 15px; display:inline-block; } ul { display: inline; margin: 0; padding: 0; } ul li {display: inline-block;} ul li:hover {background: #555;} ul li:hover ul {display: block;} ul li ul { position: absolute; width: 200px; display: none; } ul li ul li { background: #555; display: block; } ul li ul li a {display:block !important;} ul li ul li:hover {background: #666;} </style> </head> <body> <div> <a href="#">Useless Link</a> <ul> <li> <a href="#">Dropdown Link</a> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul> </li> </ul> </div> </body> </html> ``` ![](https://i.imgur.com/bWecVnA.png)