¿Cómo aumentar el área en la que se puede hacer clic de un ancla o elemento de botón?

Question 1

Aprendí de esta publicación que siempre usa elementos de anclaje o botón para hacer botones. Ahora estoy tratando de usar elementos de anclaje.

¿Hay alguna forma de aumentar el área en la que se puede hacer clic en el elemento de anclaje? Digamos que estoy usando un ancla en un cuadro div. Quiero que todo el cuadro div se convierta en un botón. ¿Puedo cambiar el área de clic del ancla a todo el cuadro div? Gracias por tu ayuda.

Question 2

Para aumentar el área de un enlace de texto, puede usar el siguiente css;

a {
  display: inline-block;
  position: relative;
  z-index: 1;
  padding: 2em;
  margin: -2em;
}

<a href="">An anchor element</a>

Pantalla: se requiere bloque en línea para que se puedan configurar los márgenes y el relleno
La posición debe ser relativa para que…
El índice z se puede usar para hacer que el área en la que se puede hacer clic permanezca encima de cualquier texto que sigue.
El relleno aumenta el área en la que se puede hacer clic
El margen negativo mantiene el flujo del texto circundante como debería ser (cuidado con los enlaces superpuestos)

Question 3

La respuesta de @ t1m0thy es más elegante que la mía. Es mejor seguir su consejo.

Además, bonito enlace propuesto por @aldemarcalazans en los comentarios: https://davidwalsh.name/html5-botones.

Respuesta original:

Usar <a /> cuando necesite un enlace (el a de ancla). Usar <button /> cuando necesitas un botón.

Dicho esto, si realmente necesita ampliar una <a />agregue el atributo CSS display: block; en eso. A continuación, podrá especificar un ancho y/o una altura (es decir, como si fuera un <div />).

Question 4

Sí, puedes si estás usando HTML5este código es válido de otro modo no:

<a href="#foo"><div>.......</div></a>

Si no está usando HTML5, puede hacer su enlace block:

#link {
  display: block;
  width: 100px;
  height: 40px;
}

<a href="#foo" id="link">Click Here</a>

Tenga en cuenta que puede aplicar width, height solo después de hacer su elemento de nivel de bloque de enlace.

Question 5

Solo haz el ancla display: block y width/height: 100%. P.ej:

.button a {
    display: block;
    width: 100%;
    height: 100%;
}

jsviolín: http://jsfiddle.net/4mHTa/

Question 6

Para mí, la solución de relleno no era buena, ya que estaba usando un borde en el botón y hubiera sido difícil modificar el marcado para crear una superposición para el área táctil.

Así que simplemente usé el pseudo elemento :before y creé una superposición, que fue perfecta en mi caso, ya que el evento de clic se propagó de la misma manera.

button.my-button:before {
  content: '';
  position: absolute;
  width: 26px;
  height: 26px;
  top: -6px;
  left: -5px;
  cursor: pointer;
}

<button class="my-button">A button</button>

Question 7

Si está utilizando HTML 5, es decir, el tipo de documento

<!doctype html>

entonces solo puedes usar enlaces a nivel de bloque.

<a href="https://stackoverflow.com/questions/11078509/google.com">
  <div class="hello">
    ..
  </div>
</a>

Question 8

agregar padding a la clase CSS de la etiqueta de anclaje. Si es necesario, agregue padding-top, padding-bottom,… individualmente de acuerdo con el área en la que se puede hacer clic que desee. Funcionó para mí.

¿Ha sido útil esta solución?