css - How can i set different hover properties from different elememtns in an HTML page? -
i have created 2 divs (topnavlinks & bottomnavlinks) , both divs contain links. hover property every link on page set black. want know how can set different hover colors 2 divs?
<!doctype html> <html> <head> <title>home</title> <style> body { font-family:"myriad pro"; } #topnavlinks { background-color:#d5d5d5; color:#1f8f3c; font-size:20px; padding:20px; margin-bottom:20px; } #bottomnavlinks { background-color:#2b88b5; color:#ffffff; padding:20px; } a:link, a:visited { color:inherit; padding:inherit; text-decoration:none; } a:hover, a:active { color:#0e0e0e; } </style> </head> <body> <div id="topnavlinks"> <a href="#">link1</a> <a href="#">link2</a> <a href="#">link3</a> </div> <div id="bottomnavlinks"> <a href="#">link1</a> <a href="#">link2</a> <a href="#">link3</a> </div> </body> </html>
like
#topnavlinks a:hover{/*do something*/} #bottomnavlinks a:hover{/*do something*/}
Comments
Post a Comment