为什么我的链接不工作？

我有一些非常简单的代码。该链接在第二个以前工作，现在不是！（已经检查并清空缓存）。为什么我的链接不工作？

这里是我的网站：上侧的导航栏应该去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>

预先感谢您！

来源

2013-03-15 Claire

您有width:1000px;对wrapper_text_photo将其删除并查看链接将工作。

In style.css line number 132

来源

2013-03-15 03:56:28

谢谢谢谢 - 新这个。你会解释为什么吗？它是“覆盖”它吗？ – Claire 2013-03-15 03:59:51

@Claire是的，这是...看看浮动，将帮助，但作为浮动divs要小心，因为他们需要非常尖锐的CSS工作，使其跨浏览器工作。 – 2013-03-15 04:01:40

@DipeshParmar，'float'可能是从浏览器到浏览器最一致的CSS属性。 – Brad 2013-03-15 04:06:09

您的#wrapper_text_photo div在您的导航之上。如果你重新工作，你的导航将起作用。

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

Debugging Example

来源

2013-03-15 03:56:33 Brad

谢谢！是的，我试过但看不到问题。 – Claire 2013-03-15 04:00:23

这是DIV和阻止点击..

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

你可以尝试把它放在与CSS的链接..

.wrapper_text_photo { z-index: -100;}

来源

2013-03-15 03:56:41 lemil77

我现在看到。非常感谢。 – Claire 2013-03-15 04:00:49

您的div与类wrapper_text_photo覆盖图像..使用css属性：z-index=-1该类别

来源

2013-03-15 04:00:44 Matt

可以解决你的问题，如果它是确定的，而不是在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

希望这有助于...

来源

2013-03-15 04:11:41 jhunlio

为什么我的链接不工作？

回答

相关问题