HTML Hover
HTML Hover:
________________________________________________
1.HTML Hover
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Hover for List & Table</title> <link rel="stylesheet" href="hoverStyle.css"> </head> <body> <table> <caption>Table</caption> <tr> <th>First Name</th> <th>Last Name</th> <th>Age</th> </tr> <tr> <td>Dark</td> <td>Hers</td> <td>99+</td> </tr> <tr> <td>Mike</td> <td>Johnson</td> <td>26</td> </tr> <tr> <td>Jacob</td> <td>Miller</td> <td>56</td> </tr> </table> <hr style="height: 10px; background-color: red;"> <ul> <li><a href="https://darkhers.blogspot.com/"><img src="darkhers.jpg" width="50px" height="50px"></a></li> <li><a href="https://en.wikipedia.org/wiki/HTML">HTML</a></li> <li><a href="https://en.wikipedia.org/wiki/CSS">CSS</a></li> <li><a href="https://en.wikipedia.org/wiki/JavaScript">JavaScript</a></li> </ul> </body> </html>
2.hoverStyle.css
table, th, td{ width: 100%; border: 1px solid black; border-collapse: collapse; } tr:hover{ background-color: yellow; } ul{ background-color: black; list-style-type: none; overflow: hidden; margin: 0; padding: 0; } li{ float: center; } li a{ color: white; text-align: center; display: block; text-decoration: none; padding: 16px; } li a:hover{ background-color: green; }
_____________________________________________
Dark Hers
YouTube
https://instagram.com/darkhers
https://www.facebook.com/darkhers
TikTok
https://www.tiktok.com/@darkhers
https://www.pinterest.co.uk/darkhers
Comments
Post a Comment