我已经为此工作了几个小时，但我无法弄清楚。有一段时间我让它正确显示背景图像，但现在它不起作用了。
HTML:
<head>
<link type="text/css" rel="stylesheet" href="css/normalize.css" media="screen"/>
<link type="text/css" rel="stylesheet" href="css/grid.css" media="screen"/>
<link type="text/css" rel="stylesheet" href="css/stylesheet.css" media="screen"/>
<script type="text/javascript" src="js/js.js"></script>
</head>
<body>
<div class="container">
<img src="images/logo.png" class="logo grid_4 none">
<img src="images/4seasons.jpg" class="head grid_8 omega none">
<ul class="links grid_9">
<a href="#"><li><img src="images/icons/home.png"></li></a>
<a href="#"><li><img src="images/icons/menu.png"></li></a>
<a href="#"><li><img src="images/icons/about.png"></li></a>
<a href="#"><li><img src="images/icons/contact.png"></li></a>
</ul>
<img src="images/icons/bar.gif" class="bar none">
</div>
</body>
我不知道这是怎么回事，但我很感激任何帮助! 这是 CSS:
.logo {
float:left;
}
.head {
margin-top:2%;
}
.bar {
width:100%;
margin-top:-5%;
}
/*Links*/
.links {
position:relative;
float:left;
list-style-type:none;
}
.links li {
float:left;
margin-left:0%;
}
.links li:hover {
background: url("images/icons/bg.png");
}
最佳答案
你不能有 <a>作为 <ul> 的直接子代或 <ol>只有一个<li>有效，因此将您的标记更改为:
<ul class="links grid_9">
<li><a href="#"><img src="images/icons/home.png"></a></li>
<li><a href="#"><img src="images/icons/menu.png"></a></li>
<li><a href="#"><img src="images/icons/aboute.png"></a></li>
<li><a href="#"><img src="images/icons/contact.png"></a></li>
</ul>
关于php - 由于某种原因，我的链接栏上的背景图片没有显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15755134/