клавиатура навигация с чистым css3

Question

Есть ли способ добавить клавиатурную навигацию к ссылкам только с css3, без js или любой библиотеки js? в частности, я создал чистый эффект css3 lightbox с кучей изображений, но я хочу перемещаться между изображениями с помощью левого и правого клавиш без щелчка в любом месте экрана и использовать escape, чтобы получить эффект кнопки «отменить» (аналогично Close)

Answer 1

То, о чем вы просите, буквально невозможно с помощью каскадных таблиц стилей. Вы можете анимировать свои последовательности для синхронизации или делать такие вещи, как анимация, переходы с помощью CSS, но вы не можете делать то, что хотите делать только с CSS !.

Причины

1. каскадные таблицы стилей были сделаны для создания визуальных элементов страницы и не UX
2. Css не имеет никакого способа взаимодействия с клавиатурой.

Вы можете добавить немного javascript для этого. Но поскольку вы не хотите использовать javascript, вы застряли!

Checkbox взломать

С Флажок радио коробки что-то, как это достижимо, но затем снова в центре внимания первоначально требует, чтобы быть привлечены. что может быть сделано с использованием атрибута автофокуса.

Так что эта скрипка должна решить вашу проблему.

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

Но я хочу предупредить вас, прежде чем руки любой «размытости» заставит это терпеть неудачу. поэтому лучше Javascript код varient приведен ниже

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, указанный выше, будет выполнять задачу изменения слайдов, или вы можете lways см. исходный код impress.js