<!DOCTYPE html> <html> <head> <style> #zoom ul{ list-style-type:none; display:block; background:rgba(200,200,200,0.5); padding:10px; width:auto; height:auto; border-radius:8px; float:left; } #zoom ul li{ float:left; } #zoom ul li a{ display:block; text-decoration:none; width:60px; height:60px; background-color:rgba(150,150,150,0.7); color:white; border-radius:10px; line-height:60px; vertical-align:middle; text-align:center; margin:1px; } #zoom ul li a:hover{ zoom:150%; } </style> </head> <body> <div id="zoom"> <ul> <li><a href="">A</a></li> <li><a href="">B</a></li> <li><a href="">C</a></li> <li><a href="">D</a></li> </ul> </div> </body> </html>
Run
×
Share