我想在悬停菜单项时更改"绿色"背景线的颜色。颜色将根据悬停的菜单项更改;即，当将鼠标悬停在第一项上时，背景线颜色将是"蓝色"。我怎样才能得到这种效果？这是我的JSFiddle：http://jsfiddle.net/n86UN/embedded/result/
另外，如果我更改块的宽度或高度，我如何才能始终在相应色块下方设置"span"元素（悬停效果）。如您所见，我将块的宽度和高度从120px更改为150px。跨度元素随意出现。提前谢谢你...
这是我的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Flat Nav</title>
<style type="text/css" media="screen">
nav{
position: relative;
text-align: center;
}
nav:after {
content: "";
width: 100%;
height: 2px;
background-color: green;
position: absolute;
right: 0;
top: 50%; /* 50% from the top */
z-index: -1;
}
nav ul {
display: inline-block; list-style: none; position: relative;
}
nav ul li {
float: left; margin: 0 20px 0 0;
}
nav ul li a {
display: block; width: 150px; height: 150px; opacity: 0.9;
}
nav ul li:nth-child(1) a {
background-color: #5bb2fc;
}
nav ul li:nth-child(2) a {
background-color: #58ebd3;
}
nav ul li:nth-child(3) a {
background-color: #ffa659;
}
nav ul li:nth-child(4) a {
background-color: #ff7a85;
}
nav ul li a span {
font: 20px "Dosis", sans-serif; text-transform: uppercase;
display: none;
}
nav ul li a:hover span {
display: block;
}
nav ul li:nth-child(1) a span {
color: #5bb2fc;
position: absolute; left: 70px; top: 160px;
}
nav ul li:nth-child(2) a span {
color: #58ebd3;
position: absolute; left: 200px; top: 160px;
}
nav ul li:nth-child(3) a span {
color: #ffa659;
position: absolute; left: 320px; top: 160px;
}
nav ul li:nth-child(4) a span {
color: #ff7a85;
position: absolute; left: 470px; top: 160px;
}
</style>
</head>
<body>
<div id="demo">
<nav>
<ul>
<li>
<a href="#">
<span>Home</span>
</a>
</li>
<li>
<a href="#">
<span>About</span>
</a>
</li>
<li>
<a href="#">
<span>Portfolio</span>
</a>
</li>
<li>
<a href="#">
<span>Contact</span>
</a>
</li>
</ul>
</nav>
</div>
</body>
</html>
JSFiddle上的一个工作示例。它适用于Chrome 32.0.1700.68测试版和Safari 7.0.1。我不知道这是否适用于任何其他浏览器。
<body>
<div id="demo">
<nav>
<ul>
<li>
<a class="nav nav-blue" href="#">
<span class="label-wrapper">
<span class="label">Home</span>
</span>
<span class="nav-after"></span>
</a>
</li>
<li>
<a class="nav nav-green" href="#">
<span class="label-wrapper">
<span class="label">About</span>
</span>
<span class="nav-after"></span>
</a>
</li>
<li>
<a class="nav nav-yellow" href="#">
<span class="label-wrapper">
<span class="label ">Portfolio</span>
</span>
<span class="nav-after"></span>
</a>
</li>
<li> <a class="nav nav-red" href="#">
<span class="label-wrapper">
<span class="label">Contact</span>
</span>
<span class="nav-after"></span>
</a>
</li>
</ul>
</nav>
</div>
</body>
.CSS：
nav {
position: relative;
text-align: center;
}
nav:after, .nav-after {
content:"";
width: 100%;
height: 2px;
position: absolute;
right: 0;
top: 50%;
/* 50% from the top */
}
nav:after {
background-color: green;
z-index: 1;
}
nav ul {
display: inline-block;
list-style: none;
}
nav ul li {
float: left;
margin: 0 20px 0 0;
}
.nav {
z-index:100;
width: 150px;
height: 150px;
display:block;
}
.label-wrapper {
position:relative;
width: 150px;
height: 150px;
opacity: 0.9;
display:block;
z-index:100;
}
.label {
position: absolute;
top: 160px;
left: 10px;
font: 20px"Dosis", sans-serif;
text-transform: uppercase;
display: none;
}
.nav:hover .label {
display: block;
}
.nav:hover .nav-after {
display:block;
z-index: 10;
}
/* Colors */
.nav-blue .label-wrapper, .nav-blue:hover .nav-after {
background-color: #5bb2fc;
}
.nav-blue .label {
color: #5bb2fc;
}
.nav-green .label-wrapper, .nav-green:hover .nav-after {
background-color: #58ebd3;
}
.nav-green .label {
color: #58ebd3;
}
.nav-yellow .label-wrapper, .nav-yellow:hover .nav-after {
background-color: #ffa659;
}
.nav-yellow .label {
color: #ffa659;
}
.nav-red .label-wrapper, .nav-red:hover .nav-after {
background-color: #ff7a85;
}
.nav-red .label {
color: #ff7a85;
}