Question

我在this CodePen上使用以下CSS代码：

#burgerMenu {
     position: absolute;
     display: block;
     top: 52px;
     left: 0;
     width: 100%;
     max-width: 450px;
     color: #fff;
     background: #2a2e2f;
     z-index: 999;
     transition: transform .5s cubic-bezier(0, 1, 0, 1);

     -webkit-transform: translateY(-100%);
             transform: translateY(-100%);
 }

 #burgerMenu ul {
     margin: 5px;
     padding-left: 0;
     list-style: none;
     text-align: left;
     font-family: "Helvetica", sans-serif;
     font-size: 14px;
     font-weight: 400;
 }

 #burgerMenu > ul > li {
     display: block;
     margin: 0 10px;
     padding: 4px 0;
     border-bottom: 1px solid #444748;
     font-size: 14px;
     line-height: 1.5rem;
     text-transform: uppercase;
 }

如何在选中后激活网址？

我尝试了:active的几种变体但没有成功。

在mouseover上正确回显了该网址。我只是无法触发选择。

Answer 1

问题是您正在使用:focus伪类打开菜单。但是当您单击菜单中的链接时，菜单按钮会失去焦点。没有焦点，:focus规则不适用，菜单关闭。

因此:active 可用于菜单中的链接，但只要用户点击链接，菜单本身就会关闭，因此您无法看到它工作。

在我看来，你现在有两种选择：

使用JavaScript打开菜单，因此您不必依赖按钮的焦点。
使用The Checkbox Hack，这是一种仅限CSS的方法（稍微复杂一点，不如JS选项推荐）。

您可以在这两个选项中随意使用:active。

如何激活和选择URL？

1 个答案: