2

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

http://robert.young1.org

在“最新作品”部分下，前两个链接（美术网站和年轻学院）在 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;
}

谢谢，

问候，

罗伯特

英国伦敦

4

3 回答 3

2

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

重叠

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

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

于 2013-09-03T10:00:17.970 回答
0

首先，您多次使用 id="right" ，这是不正确的。

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

.latest_work a:hover img{
   opacity: 1.0;
   color: #666;
   border: 2px solid #ddd;
}
于 2013-09-03T09:57:31.523 回答
0

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

于 2013-09-03T10:08:51.200 回答