導航列表內嵌塊鏈接不起作用

我遇到了我的html/css代碼問題。我正在製作一個投資組合網站，頂部有一個水平導航欄，其中.png圖像作爲導航按鈕和mouse-on/mouse-over效果（字母應該用鼠標變成灰色）。我在水平對齊按鈕時遇到了一些麻煩，但現在它們被放置在它們應該是的位置，唯一的事情是突然它們不再作爲鏈接工作，並且mouse-on/mouse-over效果消失了。導航列表內嵌塊鏈接不起作用

這是我的代碼：

<!DOCTYPE html> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<html> 
<head> 
<title>Menu</title> 
<style type="text/css"> 

body 

{background-image:url('menubg.png');} 

{background-color:#FFFFFF;} 

#navlist{margin:0;position:relative;} 
#navlist li{margin:0;padding:0;list-style:none;position:relative;top:0;} 
#navlist li, #navlist a{height:64px;display:inline-block;} 


#about{left:0px;width:145px;} 
#about{background:url('about1.png')} 
#about a:hover{background: url('about2.png')} 

#amfi{left:0px;width:168px;} 
#amfi{background:url('amfi1.png')} 
#amfi a:hover{background: url('amfi2.png')} 

#personal{left:0px;width:202px;} 
#personal{background:url('personal1.png')} 
#personal a:hover{background: url('personal2.png')} 

#inspiration{left:0px;width:202px;} 
#inspiration{background:url('inspiration1.png')} 
#inspiration a:hover{background: url('inspiration2.png')} 

#cv{left:0px;width:65px;} 
#cv{background:url('cv1.png')} 
#cv a:hover{background: url('cv2.png')} 

#contact{left:0px;width:128px;} 
#contact{background:url('contact1.png')} 
#contact a:hover{background: url('contact2.png')} 
</style> 
</head> 

<body> 
<ul id="navlist"> 
    <li id="about"><a href="about.htm" target="main"></a></li> 
    <li id="amfi"><a href="amfi.htm" target="main"></a></li> 
    <li id="personal"><a href="personal.htm" target="main"></a></li> 
    <li id="inspiration"><a href="inspiration.htm" target="main"></a></li> 
    <li id="cv"><a href="cv.htm" target="main"></a></li> 
    <li id="contact"><a href="contact.php" target="main"></a></li> 
</ul> 
</body> 
</html>

，這是我的網站是here，在這裏你可以看到我的問題。

如果你能幫助我，我會非常感激！

來源

2013-07-03 user2546404

你需要學習很多CSS的...這可以用文字完成 –

添加到@ JahanzebKhan的p oint，你也應該看看現代的HTML做法，因爲你的網站是用不切實際的編碼構建的，更不用說解決你最初問題的更多更好的方法了，我可以從你的網站上看到你仍然在使用框架，在HTML5中已棄用。 –

嘗試這樣

#about{left:0px;width:145px;} 
#about{background:url('about1.png')} 
#about:hover{background: url('about2.png')}

或者這樣

#about a{left:0px;width:145px;} 
#about a{background:url('about1.png')} 
#about a:hover{background: url('about2.png')}

來源

2013-07-03 12:37:48

是的第二個作品完美，非常感謝你！ – user2546404

您<a>■找沒有width和height你會宣佈這些在某種程度上一切的那一刻將是確定我建議給予width和height至<a>元素的財產代替<li> 例如#about a{width:145px;height:64px}而不是#about{width:145px;height:64px}

來源

2013-07-03 12:42:51 Pumpkinpro

將此添加到您的樣式表中，您的問題將得到解決。

#navlist li a { 
    display: list-item; 
}

希望這有助於。

來源

2013-07-03 12:46:06 Nitesh

我認爲這裏的問題是你只是放置一個錨標籤，但在瀏覽器中它並沒有被添加到特定的動作上我的意思是你給了<a>上的背景圖像，但標籤內沒有內容，只要你放置超鏈接它應該對一些文本或img

因此，而不是使用空標籤使用的圖像或文本中，並使用JavaScript或者jQuery來改變img src即

<a href="somthing.php" onmouseover="CHANGE_IMAGE();" onmouseout="REGAIN_IMAGE();"><img src="background/image.png"></a>

來源

2013-07-03 13:09:36

Tnx，我也會檢查一下，但是Tall BoY的答案是有效的，所以我現在就使用它了！ – user2546404

+1爲背景圖片 –

導航列表內嵌塊鏈接不起作用

回答

相關問題