我已经研究了几个小时了,但我还是想不出来。有一段时间,我让它正常显示背景图像,现在它不工作了。
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>
尝试在链接中使用:hover。也许"a"元素在"li"元素的前面,这样它就阻止了鼠标悬停的检测。
.links li a:hover {
background: url("images/icons/bg.png");
}
希望有帮助!
把你的HTML改成:
html<ul class="links grid_9">
<li class="home"><a href="#">home</a></li>
<li class="menu"><a href="#">menu</a></li>
<li class="about"><a href="#">about</a></li>
<li class="contact"><a href="#">contact</a></li>
</ul>
css .links {float:left}
.links li {float:left; list-style-type:none}
.links li a {
float:left;
text-indent:-5000px;
height:20px; /* set your own dimention */
width:20px; /* set your own dimention */
background-repeat:no-repeat;
}
.links li.home a {background-image:url(images/icons/home.png);}
.links li.menu a {background-image:url(images/icons/menu.png);}
.links li.about a {background-image:url(images/icons/about.png);}
.links li.contact a {background-image:url(images/icons/contact.png);}
.links li a:hover {background: url("images/icons/bg.png");}