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

【问题标题】：Responsive sidebar interaction using CSS使用 CSS 的响应式侧边栏交互
【发布时间】：2020-06-09 13:58:02
【问题描述】：

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

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

【问题讨论】：

标签： html css responsive-design media-queries

【解决方案1】：

您需要设置tabindex 属性以使 div 具有焦点。

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

【讨论】：

【解决方案2】：

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

【讨论】：