Question

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

这是我的网站：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>

提前谢谢！

Answer 1

如果可以解决您的问题而不是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;
}

工作demo
希望这有帮助...

Answer 2

您的#wrapper_text_photo div位于导航栏之上。如果您重新使用它，您的导航将起作用。

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

Debugging Example

Answer 3

width:1000px; wrapper_text_photo删除它，并看到链接有效。

In style.css line number 132

Answer 4

此DIV正在阻止点击..

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

你可以尝试将它放在CSS的链接下。

.wrapper_text_photo { z-index: -100;}

Answer 5

您的班级wrapper_text_photo的div覆盖了图片..请为该班级使用css属性：z-index=-1

为什么我的链接不起作用？

5 个答案: