Css 更改活动菜单项的背景_Css_Hover_Stylesheet

Css 更改活动菜单项的背景

css

Css 更改活动菜单项的背景,css,hover,stylesheet,Css,Hover,Stylesheet,我正在创建简单的侧菜单，这样当用户在项目背景颜色上悬停时，当他单击它时，悬停效果应该保持，直到用户单击其他项目我的代码： ul#nav { padding: 0; margin: 0 0 10px 0; -moz-appearance: menubar; -webkit-appearance: menubar; background-position: left; font-size: larger; } .mmenu{ width:

我正在创建简单的侧菜单，这样当用户在项目背景颜色上悬停时，当他单击它时，悬停效果应该保持，直到用户单击其他项目

我的代码：

 ul#nav {
    padding: 0;
    margin: 0 0 10px 0;
    -moz-appearance: menubar;
        -webkit-appearance: menubar;
    background-position: left;
    font-size: larger;
}

.mmenu{ width: 190px;
       position: fixed;
}
.mmenu a{
    font-size:14px;
    font-family: Arial, sans-serif;
    font-style: normal;
    font-weight:bold;
    display: block;
}

.mmenu a:hover{ color: white;
background-color: #003366;
font-style: oblique;
border-top: 0px outset #003366;
border-bottom: 0px inset #003366;
border-right:0px outset #003366;
border-left: 0px inset ;
}

悬停效果很好，但是当我单击任何项目时，样式没有保持，我尝试了活动，访问过，但运气不佳。有人知道问题出在哪里吗

html

只需添加属性即可

Onclick="this.style.background='#003366'"

当您单击导航项时，是否链接到菜单项（“.mmenu a”）

？在这种情况下，您需要向导航项添加一个类，并使用该类设置样式

<style>
body.page-name-1 #nav li.page-name-1 a, body.page-name-2 #nav li.page-name-2 a
{
    background-color: #003366;
}
</style>

<body class='<?php echo $page_name ?>'> 
<!-- If you are using PHP, and every page has a $page_name -->
<div id='nav' class='mmenu'>
<ul>
<li class='page-name-1' ><a href="another example.php">Messages</a></li>
<li class='page-name-2' ><a href= "example.php">My Conferences</a></li>
</ul>
</div>
...
</body>


body.page-name-1#nav li.page-name-1 a，body.page-name-2#nav li.page-name-2 a
{
背景色：#003366；
}
您不能通过css处理单击事件，您应该使用js/jquery，而不是您需要一些javascript，您是否仍想知道solutionOnce链接已被单击？您应该手动为此链接添加一个样式，以显示此项目现在处于活动状态。@Onheiron-我认为OP指的是：active pseudo-class.active不能用于您的目的。“活动”表示只要单击该元素。一旦你释放鼠标按钮，你的元素就不再是活动的了。当你知道css不能完成它时，你会怎么做，OP不会对一行js过敏
<style>
body.page-name-1 #nav li.page-name-1 a, body.page-name-2 #nav li.page-name-2 a
{
    background-color: #003366;
}
</style>

<body class='<?php echo $page_name ?>'> 
<!-- If you are using PHP, and every page has a $page_name -->
<div id='nav' class='mmenu'>
<ul>
<li class='page-name-1' ><a href="another example.php">Messages</a></li>
<li class='page-name-2' ><a href= "example.php">My Conferences</a></li>
</ul>
</div>
...
</body>