移动图像/链接与CSS

我需要帮助与我正在建设的网站这个小小问题。我有一个链接到不同网站的图像列表，一切看起来都很好，但是当我将鼠标悬停在最后一个链接上时，下面的链接会出于某种奇怪的原因而移动。我无法弄清楚！移动图像/链接与CSS

想象这是它看起来像在第一：

[img1] [img2] [img3] 
[img4] [img5] [img6]

这是当我将鼠标悬停在任何图像会发生什么/右侧链接：

[img1] [img2] [img3] 
       [img4] 
[img5] [img6] [img7]

这是我的代码：

这是我的HTML：

<div id="main-content">  
<h1> Check out all our DEADicated sites: </h1> 
<div class="sites"> 
    <a href="http://www.eyeem.com/TheDEADicated" target="_blank"> 
    <img src="images/sites/eye-em.jpg" width="215" height="150" alt="EyeEm"/></a> 
    <p> EyeEm </p> 
</div> 
<div class="sites"> 
    <a href="http://www.facebook.com/DeadSaraArg" target="_blank"> 
    <img src="images/sites/fb-argentina.jpg" width="215" height="150" alt="Facebook Argentina"/></a> 
    <p> Facebook - Argentina </p> 
</div> 
<div class="sites">  
    <a href="https://www.facebook.com/pages/The-DEADicated-Canada/427270554005649?ref=hl" target="_blank"> 
    <img src="images/sites/fb-canada.jpg" width="215" height="150" alt="Facebook Canada"/></a> 
    <p> Facebook - Canada </p> 
</div> 

<div class="sites"> 
    <a href="http://www.facebook.com/ThedeadicatedEgypt" target="_blank"> 
    <img src="images/sites/fb-egypt.jpg" width="215" height="150" alt="Facebook Egypt"/></a> 
    <p> Facebook - Egypt </p> 

</div> 
<div class="sites"> 
    <a href="http://www.facebook.com/DeadSaraItaly?ref=hl" target="_blank"> 
    <img src="images/sites/fb-italy.jpg" width="215" height="150" alt="Facebook Italy"/></a> 
    <p> Facebook - Italy </p> 
</div> 
<div class="sites">  
    <a href="http://www.facebook.com/thedeadicatedmexico" target="_blank"> 
    <img src="images/sites/fb-mexico.jpg" width="215" height="150" alt="Facebook Mexico"/></a> 
    <p> Facebook - Mexico </p> 
</div> 
<br/> 
<div class="sites"> 
    <a href="http://www.facebook.com/DeadSaraTheDeadicatedUK" target="_blank"> 
    <img src="images/sites/fb-uk.jpg" width="215" height="150" alt="Facebook UK"/></a> 
    <p> Facebook - UK </p> 
</div> 

</br><br><br> 

<h2> To join TheDEADicated, click <a href="http://musichype.com/artists/dead-sara" target="_blank">HERE</a>! </h2> 



</div>

我很新的网页设计。请帮助？

来源

2013-03-06 jansyb04

您是否有链接中使用的标记？ – Owen 2013-03-06 05:15:51

请在jsfiddle中分享您的HTML代码。 – web2008 2013-03-06 05:16:14

我在原帖子中加入了我的HTML代码 – jansyb04 2013-03-06 17:35:18

没有html我不能肯定地说，但只是从你的CSS，你的.sites a:hover规则应该设置border-top-color: #F90; border-bottom-color: #F90;，而不是只是边界顶部和边界底部。

来源

2013-03-06 06:09:24 tim

tim解决了问题！非常感谢你..我仍然不明白为什么会使图像移动？ – jansyb04 2013-03-06 17:39:18

移动图像/链接与CSS

回答

相关问题