Свойства CSS: как указать, где перемещаться при использовании клавиш со стрелками

Последнее обновление: 01 декабря 2018 10:48:19 (UTC / GMT +8 часов)

script1adsense2code

script1adsense3code

Решение:

HTML-код:

<!DOCTYPE html>
<html>
<head>
<title>How to specify where to navigate when using the arrow keys</title>
<style type="text/css">
button {
    position: absolute;
}
button#w3r1 {
    top: 20%; left: 25%;
    nav-index: 1;
    nav-right: #b2; nav-left: #b4;
    nav-down: #b2; nav-up: #b4;
    color: #3333CC;
}
button#w3r2 {
    top: 40%; left: 50%;
    nav-index: 2;
    nav-right: #b3; nav-left: #b1;
    nav-down: #b3; nav-up: #b1;
	color: #3333CC;
}
button#w3r3 {
    top: 70%; left: 25%;
    nav-index: 3;
    nav-right: #b4; nav-left: #b2;
    nav-down: #b4; nav-up: #b2;
	color: #3333CC;
}
button#w3r4 {
    top: 40%; left: 0%;
    nav-index: 4;
    nav-right: #b1; nav-left: #b3;
    nav-down: #b1; nav-up: #b3;
	color: #3333CC;
}
</style>
</head>
<body>
<p>w3resource Tutorial</p>
<button id="w3r1">Button 1</button>
<button id="w3r2">Button 2</button>
<button id="w3r3">Button 3</button>
<button id="w3r4">Button 4</button>
</body>
</html>

Демонстрация в реальном времени:

См. Перо nav-index-answer от w3resource ( @ w3resource ) в CodePen .

Посмотреть решение в браузере

Поддерживаемый браузер