Question

我正在学习CSS和HTML，并且在点击一个项目后仍然坚持保留悬停/活动状态的外观。我查看了本网站上的几篇帖子，但未能将该课程应用到我的应用程序中。我在这里找到了一个解决方案http://www.456bereastreet.com/archive/200503/setting_the_current_menu_state_with_css/，但它对我不起作用（我认为这是我的错）。

另一个消息来源建议使用我正在尝试的span类。我希望在选择菜单项时使用相同的悬停颜色（#fff），重量（粗体）和背景图像，以便向用户显示它们的确切位置（这是在辅助侧栏导航中并进入使用在那些主导航具有多个otions下拉列表的页面上。对我有用的唯一特征是粗体文字。您可以在此处查看正在进行的工作：

http://www.mentalwarddesign.net/dynamec/About/index.html

我假设我在跨度中创建的课程被覆盖了，但我对这个补救措施感到茫然。任何和所有的帮助将不胜感激。

以下是li的代码，然后是相应的CSS。提前谢谢！

<ul class="nav">
<span class="chosen"><li><a href="index.html" id="nav-whatwedo">What We Do</a></li></span>
<li><a href="howitstarted.html" id="nav-howitstarted">How It Started</a></li>
<li><a href="whoweare.html" id="nav-whoweare">Who We Are</a></li>
<li><a href="whatweknow.html" id="nav-whatweknow">What We Know</a></li>
</ul>

.chosen {
font-weight: bold;
color: #ffffff;
background-image: url(../imgGlobal/bulletRight.jpg);
background-repeat: no-repeat;
display: block;
padding-left: -12px;
background-position: 168px;
}
.content ul, .content ol {
padding: 0 15px 15px 40px;
background-color: #fff;
}
ul.nav {
list-style: none;
}
ul.nav li {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #464646;
height: 50px;
background-color: #000;
}
ul.nav a, ul.nav a:visited {
display: block;
width: 160px;
text-decoration: none;
padding-top: 12px;
padding-right: 5px;
padding-left: 15px;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
color: #ffffff;
font-weight: bold;
height: 38px;
background-image: url(../imgGlobal/bulletRight.jpg);
background-repeat: no-repeat;
background-position: 168px;
}

Answer 1

将chosen类放在li元素本身中。完全删除span。

编辑：对不起，在a元素中，我想说。

Answer 2

span是一个标签，一个类只是一个标识符。它们实际上并没有任何关系，除了可以使用类将样式应用于跨度，但任何标记都是如此。

在你的情况下，你试图在li（块级元素）周围放置一个span（一个内联元素）。在HTML中，内联元素不应包含块元素。

你应该能够这样做：编辑根据实际CSS修复

<li><a href="index.html" class="chosen" id="nav-whatwedo">What We Do</a></li>

Answer 3

首先，你不能将li包裹在span内。 ul的唯一直接后代是li。您可以将课程chosen直接放在li上，它就可以了。

<ul class="nav">
    <li class="chosen"><a href="index.html" id="nav-whatwedo">What We Do</a></li>
    <li><a href="howitstarted.html" id="nav-howitstarted">How It Started</a></li>
    <li><a href="whoweare.html" id="nav-whoweare">Who We Are</a></li>
    <li><a href="whatweknow.html" id="nav-whatweknow">What We Know</a></li>
</ul>

Answer 4

Ed，CSS选择器:active表示“被激活（例如通过被点击）”，而不是“具有解析为当前页面的URL的href属性”。您可以使用服务器端逻辑来插入class =“selected”或类似的。 E.g：

<li class="chosen"><a href="index.html">What We Do</a></li>

而且，CSS样式：ul.nav li.chosen a { }

您提供的教程链接中提到了另一种方法，但这不是一个好例子。

在span中使用CSS类来设置当前菜单状态？

4 个答案: