Html 使用CSS移动图像/链接
我需要帮助这个小问题,我有我的网站建设。我有一个图片列表,上面有指向不同网站的链接,大多数情况下看起来都不错,但当我将鼠标悬停在最后一行时,下面的链接会因为某种奇怪的原因移动。我搞不懂 想象一下一开始的样子:Html 使用CSS移动图像/链接,html,css,image,hyperlink,Html,Css,Image,Hyperlink,我需要帮助这个小问题,我有我的网站建设。我有一个图片列表,上面有指向不同网站的链接,大多数情况下看起来都不错,但当我将鼠标悬停在最后一行时,下面的链接会因为某种奇怪的原因移动。我搞不懂 想象一下一开始的样子: [img1] [img2] [img3] [img4] [img5] [img6] 这是当我将鼠标悬停在右侧的任何图像/链接上时发生的情况: [img1] [img2] [img3] [img4] [img5] [img6] [img7] 这是我的代码: .
[img1] [img2] [img3]
[img4] [img5] [img6]
这是当我将鼠标悬停在右侧的任何图像/链接上时发生的情况:
[img1] [img2] [img3]
[img4]
[img5] [img6] [img7]
这是我的代码:
.sites{
float:left;
width:215px;
background: #eee;
text-align:center;
margin: 0px 13px 15px 0px;
border: 1px solid #ccc;
padding:10px;
}
.sites p{
margin:0px;
padding:10px;
font:bold;
}
.sites a{
border-bottom: 5px solid #000;
border-top: 5px solid #000;
display:block;
}
.sites a:hover{
border-bottom: #F90;
border-top: #f90;
}
这是我的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>
查看我们所有已失效的站点:
埃耶姆
Facebook-阿根廷
Facebook-加拿大
Facebook-埃及
Facebook-意大利
Facebook-墨西哥
Facebook-英国
要加入标题,请单击!
我对网页设计相当陌生。请帮忙 没有html我不能确定,但仅从css来看,你的
.sites a:hover
规则应该设置边框顶色:#F90;边框底色:#F90
而不仅仅是border top和border bottom。您也有用于链接的标记吗?请在JSFIDLE中共享您的HTML代码。我在原始帖子中添加了我的HTML代码,解决了这个问题!非常感谢你。。我还是不明白为什么这会让图像移动??