使用 CSS 的响应式侧边栏交互

Question

我试图在响应式侧边栏上使用 CSS 伪 class 选择器来模拟点击交互，但不知何故无法识别焦点事件。

HTML

<html>
  <body>
    <nav class="sidebar">
      <div class="smart"></div>
    </nav>
  </body>
</html>

CSS

*{
  margin: 0;
  padding: 0;
 }

.sidebar{
  width: 30vw;
  height: 100vh;
  background-color: grey;
}

@media (max-width:425px){
  .sidebar{
    width: 30vw;
    transform: translate3d(-30vw, 0, 0);
    transition: all 0.3s ease-in-out;
  }

  .smart{
    position: absolute;
    width: 40px;
    height: 40px;
    left: 100%;
    background: black;
  }

  .sidebar:focus {
    transform: translate3d(0, 0, 0);
  }

  .sidebar:focus .smart{
    pointer-events: none;
  }
}

https://jsfiddle.net/5Lt0mgyk/

如有任何帮助，我们将不胜感激。 TIA

Answer 1

您需要设置 tabindex 属性以使 div 可聚焦。

<html>
  <body>
    <nav class="sidebar" tabindex="0">
      <div class="smart"></div>
    </nav>
  </body>
</html>

Answer 2

所有 html 元素都不能接收 css :focus，只有某些已定义的元素可以接收焦点，这也取决于浏览器，但大多数是那些可以接收焦点的元素接收和输入，更详细的解释和元素列表可以参考这个link Which HTML elements can receive focus? 希望对你有帮助。

使用 CSS 的响应式侧边栏交互

Responsive sidebar interaction using CSS

html

css

media-queries

responsive-design