纯css3的键盘导航

Question

有没有办法在没有 js 或任何 js 库的情况下仅使用 css3 将键盘导航添加到链接？具体来说，我用一堆图像创建了一个纯 css3 灯箱效果，但我想使用左右键在图像之间导航而不点击屏幕上的任何位置，并使用转义来获得“取消”按钮的效果（类似于关闭）

Answer 1

使用 Cascading Style Sheets 几乎不可能实现您的要求，您可以为序列设置动画以进行计时或使用 CSS 执行动画、过渡等操作，但您无法仅使用 CSS 完成您想做的事情！

原因

1. 级联样式表用于制作页面的视觉元素而不是 UX
2. Css 没有与键盘交互的方法。

您可以添加一点 javascript 来实现这一点。但是因为你不想使用 javascript 你被卡住了！

复选框破解

使用复选框单选框可以达到这样的效果，但最初又是焦点 需要带。这可以使用自动对焦属性来完成..

所以这个小提琴应该可以解决你的问题。

http://jsfiddle.net/darkyen/NUtnX/

但我想事先警告您，任何“模糊”都会导致此操作失败。所以下面列出了更好的 javascript 代码变体

JavaScript 代码

实现您想要的 javascript 代码将包含非常少的 javascript 说你的标记是

所以你可以简单地分配一个 lil javascript

(function(){
 var slide = 0,  // Current slide 
     max   = 10, // Maximum Number of slides
 ele = document.getElementById("show");
     document.addEventListener('keydown',function(e){
          e.preventDefault();
          e.stopPropagation(); // To stop more event stuff and default behaviour
          key = e.keyCode; // To find out what key is this 
          if( key === 39 ){
              // Right arrow 
              // Aha we incremented the value!
              slide++;
              slide %= (max+1);
              // Increase the value of slide by 1 and keep em in limits
          }else if( key === 37){
              slide = (--slide >= 0)?slide: ( slide + max );
              // Will decrement the slide value by 1 and if they are less then 0 then   will cycle it to the last slide 
          }  

          ele.className.replace(/slide[0-9]/gi,'slide'+slide);                 
          // wasn't hard now was it ?     
     });
 })();

上面的最小 javascript 将完成更改幻灯片的任务，或者您始终可以看到 impress.js 的源代码