当我悬停图像时,我的图像链接有点摆动.我不知道如何解决这个问题：/我在css中使用缩放效果来使图片在悬停时更大一些.
码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <Meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="icon" href="icon.ico" type="image/ico" /> <title>THU | TheHardUploader</title> </head> <style> body{ margin: 0px auto; background-image:url(aa.jpg); background-position: center; background-attachment:fixed; background-color:black; background-repeat: no-repeat; } #main{ margin: 0px auto; } .banner{ height: 210px; margin-top: 35px; background-color: black; -khtml-opacity:.50; -moz-opacity:.50; -ms-filter:”alpha(opacity=50)”; filter:alpha(opacity=50); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5); opacity:.50; border-top: 5px solid gray; border-bottom: 5px solid gray; } .logo{ margin: 0px auto; margin-top: -300px; position:absolute; margin-left: 40px; } .recordsbild{ margin: 0px auto; margin-left: 250px; position:absolute; margin-top: -200px; } .line{ position:absolute; height: 180px; width: 10px; background-color: white; margin-top: -195px; margin-left: 950px; } .musikstil{ position:absolute; font-family: "Arial Rounded MT Bold"; font-size: 20px; margin-left: 420px; margin-top:-50px; } .musikstil a{ text-decoration: none; transition: opacity .35s ease-in-out; -moz-transition: opacity .35s ease-in-out; -webkit-transition: opacity .35s ease-in-out; color: white; } .musikstil a:hover{ opacity: 0.2; } .menu{ position:absolute; width: 120px; opacity: 1.0; transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out; margin: auto; margin-top: -190px; margin-left: 1020px; } .menu a{ color: white; font-family:"Arial Rounded MT Bold"; text-decoration:none; font-size: 20px; transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out; } .dub{ color:white; } .hard{ color: #009cff; } .glitch{ color: #744eac; } .chill{ color: #bc0096; } .menulogos{ position:absolute; margin-left: 890px; margin-top: -215px; } .shop{ position: absolute; margin-top: 6px; } .promoting{ position: absolute; margin-top: 41px; } .about{ position: absolute; margin-top: 35px; } .artists{ position: absolute; margin-top: 28px; } .release{ position: absolute; margin-top: 17px; } .menu a:hover{ opacity: 0.2; } .bannerwrap{ width: 1280px; margin: 0px auto; } .socialmedia{ margin: 0px; margin-left: 350px; margin-top: 20px; } .socialmedia img{ -webkit-transform:scale(0.9); /*Webkit: Scale down image to 0.8x original size*/ -moz-transform:scale(0.9); /*Mozilla scale version*/ -o-transform:scale(0.9); /*Opera scale version*/ -webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/ -moz-transition-duration: 0.5s; /*Mozilla duration version*/ -o-transition-duration: 0.5s; /*Opera duration version*/ opacity: 1; /*initial opacity of images*/ } .socialmedia img:hover{ -webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/ -moz-transform:scale(1.1); /*Mozilla scale version*/ -o-transform:scale(1.1); /*Opera scale version*/ Box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/ -webkit-Box-shadow:0px 0px 30px gray; /*Safari shadow version*/ -moz-Box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/ opacity: 1; } </style> <body> <div id="main"> <div class="banner"> </div> <div class="bannerwrap"> <div class="logo"> <img src="logo.png" /> </div> <div class="recordsbild"> <img src="records.png" /> </div> <div class="musikstil"> <a href="#"> Dubstep  |</a> <a href="#">  Hardstyle  |</a> <a href="#">  Glitch Hop  |</a> <a href="#">  Chillstep</a> </div> <div class="line"> </div> <div class="menulogos"> <img src="menulogo.png" /> </div> <div class="menu"> <a href="#" class='contact'> Contact Us </a> </br> <a href="#" class='shop'> Shop </a> </br> <a href="#" class='release'> Releases </a> </br> <a href="#" class='artists'> Artists </a> </br> <a href="#" class='about'> About Us </a> </br> <a href="#" class='promoting'> Promoting </a> </div> </div> <div class="socialmedia"> <a href="#" class="fb"> <img src="fb.png" /></a> <a href="#" class="youtube"> <img src="youtube.png" /> </a> <a href="#" class="twitter"> <img src="twitter.png" /> </a> <a href="#" class="soundcloud"> <img src="soundcloud.png" /> </a> </div> </div> </body> </html>
