2

私が構築しているサイトで発生しているこの小さな小さな問題について、助けが必要です。さまざまな Web サイトへのリンクを含む画像のリストがあり、ほとんどすべて問題ないように見えますが、行の最後の画像にカーソルを合わせると、奇妙な理由で下のリンクが移動します。わからない！

これが最初にどのように見えるか想像してみてください：

[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>

私はウェブデザインにかなり慣れていません。助けてください？

4

1 に答える 1

1

html がなければ、確かなことは言えませんが、css だけでは、border-top と border-bottom だけでなく、.sites a:hoverルールを設定する必要があります。border-top-color: #F90; border-bottom-color: #F90;

于 2013-03-06T06:09:24.080 に答える