使用 CSS 的响应式侧边栏交互
Responsive sidebar interaction using CSS
我试图在响应式侧边栏上使用 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
您需要设置 tabindex
属性以使 div 可聚焦。
<html>
<body>
<nav class="sidebar" tabindex="0">
<div class="smart"></div>
</nav>
</body>
</html>
所有 html 元素都不能接收 css :focus,只有某些已定义的元素可以接收焦点,这也取决于浏览器,但大多数是那些可以接收焦点的元素接收和输入,更详细的解释和元素列表可以参考这个link
Which HTML elements can receive focus?
希望对你有帮助。
我试图在响应式侧边栏上使用 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
您需要设置 tabindex
属性以使 div 可聚焦。
<html>
<body>
<nav class="sidebar" tabindex="0">
<div class="smart"></div>
</nav>
</body>
</html>
所有 html 元素都不能接收 css :focus,只有某些已定义的元素可以接收焦点,这也取决于浏览器,但大多数是那些可以接收焦点的元素接收和输入,更详细的解释和元素列表可以参考这个link Which HTML elements can receive focus? 希望对你有帮助。