当我将鼠标悬停在导航栏链接上时,我想更改其颜色。我有背景改变但我希望在悬停时改变背景和文本。请注意,它适用于子链接,但不适用于主导航链接。
有人可以告诉我如何在悬停在文字上方时改变文字颜色吗?
以下是我的结果:http://jsfiddle.net/BWnta/13/
谢谢。
这是html: SJ Expo NavBar Dropdown HTML5
<link rel="stylesheet" href="NavBar-MonctonExpo.css" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<div id="nav">
<div id="nav_wrapper">
<ul>
<li><a href="http://wellness-expo.com/index.htm" TARGET="_blank">Main</a>
</li>
<li> <a href="http://wellness-expo.com/Moncton/Wellness-Expo-Moncton.htm">Moncton</a>
</li>
<li> <a href="http://wellness-expo.com/Moncton/Seminars.htm">Lecture Schedule</a>
<ul>
<li><a href="http://wellness-expo.com/Moncton/Lecture/Schedule.htm">Spring</a>
</li>
<li><a href="http://wellness-expo.com/Moncton/Lecture/Fall/Schedule.htm">Fall</a>
</li>
</ul>
</li>
<li> <a href="http://wellness-expo.com/Moncton/Exhibitors.htm">Exhibitor List</a>
<ul>
<li><a href="http://wellness-expo.com/Moncton/Exhibitor-List-Spring.htm">Spring</a>
</li>
<li><a href="http://wellness-expo.com/Moncton/Exhibitor-List-Fall.htm">Fall</a>
</li>
</ul>
</li>
<li> <a href="http://wellness-expo.com/Moncton/ToExhibit.htm">To Exhibit</a>
<ul>
<li><a href="http://wellness-expo.com/Moncton/ToExhibit-Spring.htm">Spring</a>
</li>
<li><a href="http://wellness-expo.com/Moncton/ToExhibit-Fall.htm">Fall</a>
</li>
</ul>
</li>
<li><a href="http://wellness-expo.com/Moncton/Contact-Us.htm" TARGET="_blank">Contact Us</a>
</li>
</ul>
</div>
<!-- Nav wrapper end -->
</div>
<!-- Nav end -->
</html
这是CSS:
#body {
padding: 0;
margin: 0;
font-family: Arial;
font-size: 17px;
}
#nav {
background-color: #DFF7EB;
font-family: Arial;
}
#nav_wrapper {
width: 800px;
margin: 0 auto;
text-align: center;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
min-width: 200px;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
background-color: #C6F7D4;
color:#FFF;
}
#nav ul li a, visited {
color: #69716D;
display: block;
padding: 15px;
text-decoration: none;
}
/*notes--old text or background colors (CCC, 4a0, )*/
#nav ul li:hover ul {
display: block;
color: #FFF;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #C6F7D4;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a:hover {
color: #FFF;
}