我已经使用 CSS 和用于鼠标悬停状态(即悬停、事件)的图像 sprite 创建了我的导航菜单。但是，我正在尝试创建一个“已选择/当前”状态(在我的例子中与事件状态相同)，以便根据您选择的页面，突出显示相应的导航按钮。 这是我拥有的:
CSS:
#menu li {
margin: 0;
padding: 0;
height: 50px;
list-style: none;
display: inline;
float: left;
line-height: 40px;
}
#menu a {
display: block;
height: 50px;
}
#menu a:hover {
background-image:url(../Images/about_rollover.gif)
}
#about {
width: 90px;
}
#about a:hover {
background-position: 0 -50px;
}
#about a:active {
background-position: 0 -100px;
}
#about a:selected {
background-position: 0 -100px;
}
#portfolio {
width: 90px;
}
#portfolio a:hover {
background-position: 90px -50px;
}
#portfolio a:active {
background-position: 90px -100px;
HTML:
<ul id="menu">
<li id="about"><a href"#"></a></li>
<li id="portfolio"><a href="portfolio.html"></a></li>
</ul>
图像 Sprite :view here
最佳答案
解决这个问题的一种方法是在 body 标签上放置一个类，用于标识您当前正在浏览的页面，并在导航项属于该特定类时将所选状态应用于导航项。喜欢:
HTML:
<body class="about">
<ul id="menu">
<li id="about"><a href=...
CSS:
body.about ul li.about { [selected background position] }
关于html - 导航菜单的选定/当前状态，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13353741/