Html 使用CSS的响应性侧栏交互_Html_Css_Responsive Design_Media Queries

Html 使用CSS的响应性侧栏交互

html css responsive-design

Html 使用CSS的响应性侧栏交互,html,css,responsive-design,media-queries,Html,Css,Responsive Design,Media Queries,我试图在响应侧边栏上使用CSS伪类选择器模拟点击交互，但不知何故焦点事件无法识别 HTML <html> <body> <nav class="sidebar"> <div class="smart"></div> </nav> </body> </html> 任何帮助都将不胜感激。 TIA您需要设置tabindex属性以使div可聚焦 <html>

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

HTML

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

任何帮助都将不胜感激。

TIA

您需要设置

tabindex

属性以使div可聚焦

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

所有html元素都不能接收css:focus，只有某些已定义的元素可以接收focus，这也取决于浏览器，但大多数都是可以接收和输入的元素，有关更详细的解释和元素列表，您可以参考此链接希望能有帮助

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