html - 如何在 CSS 中突出显示菜单。我使用了 a:active 但它没有达到我预期的目的

Question

.cshtml

<li>@Html.ActionLink("Tools", "Index", new { Area = "", Controller = "Tools" })</li>

.css

a:active
{
    font-weight: bold;
    background: #F96611;
    border: 3px solid #FFB380;
}

a:active 仅在鼠标单击按下和释放之间起作用。但是我需要在鼠标单击菜单后突出显示菜单。谢谢

score 1 · Accepted Answer

你不能添加css。.active 仅适用于点击，但不适用于活动状态。您可以使用下面的 jquery 代码在单击时添加类

$('li').click(function() {
  $(this).addClass('youractiveclass'); 
})

score 0 · Accepted Answer

鼠标单击菜单后，它会变成“已访问”，您应该将其添加到您的 css 中：

a:visited
{
    font-weight: bold;
    background: #F96611;
    border: 3px solid #FFB380;
}

你也可以为a.hover和a.link做到这一点

score 0 · Accepted Answer

这可以通过 CSS（使用visited）实现。CSSactive伪类仅适用于点击期间，而不是之后。如果您想要持久的效果，请使用visited或更好的 Javascript。通过 javascript，您还可以对其进行自定义，以便通过交替单击添加或删除样式：

$("#menu").click(function() {
  $(this).toggleClass('highlightclass');
});

score 0 · Accepted Answer

只有当您按住链接上的鼠标按钮时，活动状态才有效。这就是它应该的样子。

检查这个小提琴以了解：http: //jsfiddle.net/8fqGp/

如果要持续突出显示菜单项，则应遵循 Sowmya 或 Cupidvogel 的回答。

4 回答 4