使用 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，只有某些定义的元素可以接收焦点，这也取决于浏览器，但大多数是可以接收和输入的元素，更详细的解释和元素列表您可以请参阅此链接哪些 HTML 元素可以接收焦点？ 希望能帮助到你。

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

问题描述

2 个解决方案

解决方案1
1 已采纳 2020-06-09 05:54:04

解决方案2
0 2020-06-09 05:58:02

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

问题描述

2 个解决方案

解决方案1 1 已采纳 2020-06-09 05:54:04

解决方案2 0 2020-06-09 05:58:02

解决方案1
1 已采纳 2020-06-09 05:54:04

解决方案2
0 2020-06-09 05:58:02