爲什麼我的鏈接不工作？

我有一些非常簡單的代碼。該鏈接在第二個以前工作，現在不是！（已經檢查並清空緩存）。爲什麼我的鏈接不工作？

這裏是我的網站：上側的導航欄應該去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

爲什麼我的鏈接不工作？

回答

相關問題