0

我有一些非常简单的代码。该链接在一秒钟前有效，但现在不行！（已检查并清空缓存）。

这是我的网站：http ://claireisabelwebb.com/index.html 侧面的导航栏应该转到http://claireisabelwebb.com/experiments.html等。链接应该在悬停时变为斜体，并且颜色不同在他们访问之后。

这是CSS：

/* Link Styles***********************************************************************/

#home_link a:link{
        font-family: 'Lato', sans-serif;
        color: #330066;  
        text-decoration: none;
        font-size: 115px;
        font-weight: 100;
        text-align: left;
        letter-spacing: -28px;
}

#home_link a:visited{
        font-family: 'Lato', sans-serif;
        color: #330066;  
        text-decoration: none;
        font-size: 150px;
        font-weight: 100; 
        text-align: left;
        letter-spacing: -28px;
}

#main_menu a:link{
        font-family:'Lato', sans-serif;
        font-size: 30px;
        font-weight: 100; 
        color:#336699;
        text-decoration: none; 
        text-align: left;
        letter-spacing:0.2em;
}

#main_menu a:visited{
        font-family: 'Lato', sans-serif;
        font-size: 30px;
        font-weight: 100;
        color:#005522;
        text-decoration: none; 
        text-align: left;
        letter-spacing:0.2em;
}

#main_menu a:hover{
        font-family:'Lato', sans-serif;
        font-style: italic;
        font-size: 30px;
        font-weight: 100; 
        color:#CC0066;
        text-decoration: none; 
        text-align: left;
        letter-spacing:0.2em;
} 

#sec_menu a:link{
    font-family:'Lato', sans-serif;
        font-weight: 100; 
        color:#CC0066;
        text-decoration: none;
        font-size: 16px; 
        text-align: left;
        letter-spacing:0.2em;
}

#sec_menu a:visited{
        font-family:'Lato', sans-serif;
        font-weight: 100; 
        color:#005522;
        text-decoration: none;
        font-size: 16px; 
        text-align: left;
        letter-spacing:0.2em;
}

#sec_menu a:hover{
        font-family:'Lato', sans-serif;
        font-style: italic;
        font-size: 16px;
        font-weight: 100; 
        color:#CC0066;
        text-decoration: none; 
        text-align: left;
        letter-spacing:0.2em;
}

和html：

<!-- Main Navigation Menu ______________________________________________-->

    <div id="main_menu" class="main_wrapper_nav_box">
        <div id="sec_menu">
            <div class="main_page_nav_box">
                <a href="Experiments.html">EXPERIMENTS</a>
            </div>
            <div class="main_page_nav_box">
                <a href="writing.html">WRITING</a> 
            </div>
            <div class="main_page_nav_box">
                <a href="photography.html">PHOTOGRAPHY</a>
            </div>
            <div class="main_page_nav_box">
                <a href="graphics.html">GRAPHICS</a>
            </div>
            <div class="main_page_nav_box">
                <a href="artwork.html">ART WORK</a>
            </div>
            <div class="box_sec_nav_ms">
                <a href="artwork.html">Modernist Summer</a>
            </div>
            <div class="box_sec_nav_r">
                <a href="resume/Claire-Webb.pdf">R&#233;sum&#233;</a>
            </div>
        </div>
    </div>

先感谢您！

4

5 回答 5

2

float:left如果没问题，您可以解决您的问题，而不是.main_wrapper_nav_box更改它relative:position并添加z-index:1;

.main_page_nav_box{
        display:block;
        position:relative;
    z-index:1;
        background: rgba(255,255,255,.85);
        width:200px;
        text-align: center;
        height: 25px;
        padding:10px 10px 10px 10px;
        border:0px ;
        margin-top:10px;
        margin-left:10px;
}

工作演示

希望这有助于...

于 2013-03-15T04:11:41.307 回答
1

您的#wrapper_text_photodiv 位于导航的顶部。如果您重新工作，您的导航将起作用。

顺便说一句，您可以使用浏览器工具自己找到此类问题。我建议使用 Google Chrome 的开发者工具，或 Firefox 中的 Firebug，然后将鼠标悬停在页面中的不同元素上以查看它们占用的空间。然后，您可以删除元素以实时查看效果。（见下图蓝色区域）

调试示例

于 2013-03-15T03:56:33.280 回答
0

您的带类的 divwrapper_text_photo覆盖了图像.. 使用 css 属性：z-index=-1对于该类

于 2013-03-15T04:00:44.540 回答
0

您必须width:1000px;将wrapper_text_photo其删除，然后查看链接是否有效。

In style.css line number 132
于 2013-03-15T03:56:28.743 回答
0

这个 DIV 是和阻止点击..

<div class="wrapper_text_photo">....</div>

您可以尝试将其放在带有 CSS 的链接下。

.wrapper_text_photo { z-index: -100;}
于 2013-03-15T03:56:41.113 回答