En este artículo, aprenderemos cómo definir dónde navegar al usar las teclas de flecha en CSS.
Enfoque: Podemos hacer esta tarea usando las propiedades CSS nav-up, nav-down, nav-right y nav-up juntas. Estas propiedades se utilizan para navegar a través de la tecla de navegación desde el teclado. Las propiedades definen dónde enfocarse cuando el usuario navega usando la tecla de navegación. Entonces, al usar estas cuatro propiedades, podemos hacer esta tarea en los siguientes pasos:
- Cuando estemos en el botón izquierdo, estableceremos el valor de navegación derecha y navegación abajo en #Geeks2, que es el botón superior, y el valor de navegación izquierda y navegación arriba , en #Geeks4, que es el botón abajo.
- Al igual que hacemos con otros botones, podemos navegar a través de la tecla de navegación del teclado.
Sintaxis:
nav-up: auto | id | target-name | initial | inherit; nav-down: auto | id | target-name | initial | inherit; nav-right: auto | id | target-name | initial | inherit; nav-left: auto | id | target-name | initial | inherit;
Nota: estas propiedades solo admiten Opera 12.0.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body{
font-size: 30px;
}
button {
position: absolute;
}
h1 {
color: green;
}
button {
background-color: rgb(153, 153, 153);
border-radius: 25px;
font-size: 20px;
}
/*When we are on Left button we change it's
navigation using nav properties*/
#Geeks1 {
nav-right: #Geeks2;
nav-left: #Geeks4;
nav-down: #Geeks2;
nav-up: #Geeks4;
top: 35%;
left: 43%;
nav-index: 1;
}
/*When we are on top button we change it's
navigation using nav properties*/
#Geeks2 {
nav-right: #Geeks3;
nav-left: #Geeks1;
nav-down: #Geeks3;
nav-up: #Geeks1;
top: 50%;
left: 65%;
nav-index: 2;
}
/*When we are on right button we change it's
navigation using nav properties*/
#Geeks3 {
nav-right: #Geeks4;
nav-left: #Geeks2;
nav-down: #Geeks4;
nav-up: #Geeks2;
top: 65%;
left: 43%;
nav-index: 3;
}
/*When we are on bottom button we change it's
navigation using nav properties*/
#Geeks4 {
nav-right: #Geeks1;
nav-left: #Geeks3;
nav-down: #Geeks1;
nav-up: #Geeks3;
top: 50%;
left: 20%;
nav-index: 4;
}
</style>
</head>
<body>
<center>
<h2>GeeksforGeeks</h2>
<p>
Press the <samp>Shift</samp>
key while navigating with the arrow keys.
</p>
</center>
<button id="Geeks1">Up
<i class="fa fa-arrow-up"></i>
</button>
<button id="Geeks2">Right
<i class="fa fa-arrow-right"></i>
</button>
<button id="Geeks3">Down
<i class="fa fa-arrow-down"></i>
</button>
<button id="Geeks4">Left
<i class="fa fa-arrow-left"></i>
</button>
</body>
</html>
Producción:
teclas de flecha
Publicación traducida automáticamente
Artículo escrito por nikhilchhipa9 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA