html - menu li a:active 我怎样才能让它正常工作？

Question

我正在做一个导航栏，我希望当用户按下“showreel”时会出现另外两个部分。我怎么能用 CSS 做到这一点？

这是我的代码：

<li><a href="showreel.html">showreel</a>
    <ul>
     <li><a href="showreel.html">director</a></li>
    <li><a href="showreel.html">cinematographer</a></li>
    </ul>

Answer 1

如果您可以显示您的标记，这将有很大帮助。

此外，对于这种行为，最好使用 JavaScript 而不是 CSS。您不应该使用 CSS 来根据另一个外部元素更改元素的样式。

如果导演和摄影师在同一个元素中，那么可能是这样的嵌套选择器（我假设你的 showreel 是一个锚，另一个是跨度）

a:active > span {
   display: inline;
}

但这又不是最佳实践，您应该研究 Javascript 解决方案。

Answer 2

正如其他人提到的，您可能希望使用:hover悬停菜单。请注意，仅使用键盘无法访问典型的悬停菜单，并且需要付出额外的努力才能让它们在键盘上工作。您需要挂钩焦点事件来执行此操作：

演示

CSS

ul li:hover ul,

ul li.forceShow ul
{
    display:block;
}

ul ul {
    display:none;
}

JS

$('ul a').focusin(function () {
    $(this).parent().toggleClass('forceShow');
});

Answer 3

好的，使用您提供的新标记，我认为您无法仅使用 CSS 实现您想要的。原因是你的

<a href="showreel.html">showreel</a>

`tag 是获得 :active 伪类的那个，但它不包含其他两个链接。因此，其他两个链接不受 showreel 链接的影响，无论如何都不会受到 CSS 的影响。

如果您愿意使用 Javascript，则解决方案非常简单。