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

Question

I am trying to mimic a click interaction using CSS pseudo class selectors on responsive sidebar but somehow the focus event is not recognizing.我试图在响应式侧边栏上使用 CSS 伪 class 选择器来模拟点击交互，但不知何故，焦点事件无法识别。

HTML HTML

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

CSS 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/ https://jsfiddle.net/5Lt0mgyk/

Any help would be appreciated.任何帮助，将不胜感激。 TIA TIA

Answer 1

You need to set the tabindex attribute to make the div focusable.您需要设置tabindex属性以使 div 具有焦点。

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

Answer 2

All html elements can't receive a css:focus, there are only certain defined elements that can receive focus and it also depends upon browser, but mostly these are those elements which can receive and input, for more detailed explanation and element list you can refer to this link Which HTML elements can receive focus?所有 html 元素都无法接收 css:focus，只有某些定义的元素可以接收焦点，这也取决于浏览器，但大多数是可以接收和输入的元素，更详细的解释和元素列表您可以请参阅此链接哪些 HTML 元素可以接收焦点？ Hope it helps.希望能帮助到你。

使用 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