为什么我的图片链接不能用于chrome，即使它们在IE中工作？

Question

我最近建立了Ftp这个网站:(我的个人投资组合网站）：

http://robert.young1.org

在“最新作品”部分，前两个链接（Fine Art Site＆amp; Young Academy）在Chrome中运行良好。然而，接下来的两个链接在Chrome中根本不起作用，即使它们在IE中工作。

有没有人知道为什么？

该部分的代码如下：

<div class="latest_work">

    <h2>Latest Work</h2>

    <hr />


    <div class="grid_7">

        <h3>Fine Art site</h3>                  

        <a href="http://robert.young1.org/fineart.php"><img src="img/fine_art resized.png" width="317" height="200" class="grid_5"></a>

    </div>

    <div class="grid_7 omega" id="right">

        <h3>Young Academy site</h3>

        <a href="http://robert.young1.org/youngacademy.php"><img src="img/young_academy.png" width="317" height="200" class="grid_5"></a>

    </div>

    <div class="grid_7">

        <h3 class="grid_7">Pinner Walks site</h3>

        <a href="http://robert.young1.org/pinnerwalks.php"><img src="img/pinner_walks resized.png" width="317" height="200" class="grid_5"></a>

    </div>

    <div class="grid_7 omega" id="right">

        <h3>PSLK </h3>

        <a href="http://robert.young1.org/pslk.php"><img src="img/pslk resized.png" width="317" height="200" class="grid_5"></a>



    </div>
</div>

CSS：

    .latest_work {
    margin-top: 220px;
}






.latest_work h3 {
    margin-top: 20px;
}

.latest_work img {
    color: #999;
    border: 2px solid #bbb;
    background-color: #f0eeed;
    opacity: .9;
}

.latest_work img:hover {
    opacity: 1.0;
    color: #666;
    border: 2px solid #ddd;
}

谢谢，

此致

罗伯特

英国伦敦

Answer 1

这是因为没有任何样式，“其他项目”会重叠链接，如下所示：

显然，通过造型，它仍然重叠，只是向下移动了一点。要解决此问题，您可以这样做：

.grid_7{position:relative;z-index:999;}

Answer 2

首先，你多次使用id =“right”，这是不正确的。

还尝试以正确的方式使用选择器：

.latest_work a:hover img{
   opacity: 1.0;
   color: #666;
   border: 2px solid #ddd;
}

Answer 3

您忘记多次关闭标记，这是导致错误的原因。