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