CSS 选择器：应用 :focus 导航栏

Question

遵循 ADA 标准，当用户的鼠标悬停在导航栏上（使用 :hover）或用户的鼠标聚焦在导航栏中的某个项目上时，我需要使导航栏展开。

虽然我能够理解第一部分，但我无法实现第二个要求。

这是一个代码 sn-p 来演示我当前的实现：

https://codepen.io/neotriz/pen/MoBMvz?editors=1100

CSS：

.nav-template {
    height: 100%;
    position: absolute;
    transition: width 0.3s linear;
    display: flex;
    overflow: hidden;
    background: black;
    width: 70px;
    &:hover{
        width: 150px;
    }

    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;

        li {
            margin: 0;
            padding: 0;
            cursor: pointer;
            &:hover {
                background-color: rgba(255, 255, 255, 0.12);
            }
            a {
                color: white;
                height: 40px;
                margin-left: 12px;
                margin-right: 35px;
                padding-bottom: 10px;
                display: flex;
                align-items: center;
                text-decoration: none;
            }
        }
    }
}

如果我在 &:hover 所在的位置应用 &:focus ，它似乎不起作用，因为它认为需要选择整个导航栏才能扩展它，假设专注于每个单独的项目。

我当前的实现是否需要修改？

Answer 1

试试这样的东西

HTML

<div tabindex="1" class="nav-template">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

少

.nav-template {
    height: 100%;
    position: absolute;
    display: flex;
    overflow: hidden;
    background: black;
    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    transition: width 0.3s linear;
        li {
            margin: 0;
            padding: 0;
            cursor: pointer;
            a {
                color: white;
                height: 40px;
                margin-left: 12px;
                margin-right: 35px;
                padding-bottom: 10px;
                display: flex;
                align-items: center;
                text-decoration: none;
                width:70px;
                transition:all ease 0.5s;
        &:focus,&:hover {
                width: 100px;
        background-color: rgba(255, 255, 255, 0.12);
            }
            }
        }
    }
}

CSS

.nav-template {
  height: 100%;
  position: absolute;
  display: flex;
  overflow: hidden;
  background: black;
}
.nav-template ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  transition: width 0.3s linear;
}
.nav-template ul li {
  margin: 0;
  padding: 0;
  cursor: pointer;
}
.nav-template ul li a {
  color: white;
  height: 40px;
  margin-left: 12px;
  margin-right: 35px;
  padding-bottom: 10px;
  display: flex;
  align-items: center;
  text-decoration: none;
  width:70px;
  transition:all ease 0.5s;
}
.nav-template ul li a:focus,
.nav-template ul li a:hover {
  width: 100px;
  background-color: rgba(255, 255, 255, 0.12);
}

在锚标签上使用 :focus 会增加它的宽度， :focus 适用于 div 但这里的问题是当你聚焦时它直接聚焦在锚标签上而不是 div 或 li 或 ul 上

为过渡添加这些规则

.nav-template ul li a{
width:70px;
transition:all ease 0.5s;
}

Link For reference

试试看

希望这会有所帮助...