Question

我的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，您可以在其中查看我的问题。

如果你能帮助我，我会非常感激！

Answer 1

我认为这里的问题是你只是放置一个锚标签但是在浏览器中没有添加特定动作我的意思是你在<a>上给出了背景图像但是标签内没有内容，请记住每当你可以在某些文字或img

上放置超链接

因此，不使用空标签而是使用其中的图像或文本，并使用javascript或jquery来更改img src，即

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

Answer 2

试试这个

#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')}

Answer 3

你的<a>没有width和height当你以某种方式宣布一切都会好的时候我建议将width和height的属性赋予<a>元素，而不是<li> 例如#about a{width:145px;height:64px}而不是#about{width:145px;height:64px}

Answer 4

将此添加到您的样式表中，您的问题就会得到解决。

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

希望这有帮助。

导航列表内联块链接不起作用

4 个答案: