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

这Link会对您有所帮助。在浏览器中打开它，右键单击并检查元素，您将找到代码。

Answer 2

如果你能展示你的标记会有很大的帮助。

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

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

a:active > span {
   display: inline;
}

但这再一次不是最佳做法，你应该研究Javascript解决方案。

Answer 3

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

Demo

<强> 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 4

好的，使用你提供的新标记，我认为你不能用CSS实现你想要的东西。原因是你的

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

`tag是获得：active伪类的人，但它不包含其他两个链接。因此，其他两个链接不会受到showreel链接的影响，反而不仅仅是CSS。

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

menu li a：active如何让它正常工作？

4 个答案: