0
77
VistasÁrea de la tarjeta de enlace que contiene un botón
El área gris debe ser un enlace de etiqueta <a> . El área negra es un <button> dentro del área gris. El botón debe tener una acción onClick .
Cuando hago clic en algo gris, quiero acceder al enlace de la etiqueta <a> . Cuando hago clic en el área negra, quiero activar la acción del botón. ¿Cuál es la forma adecuada y accesible de lograr esto?
·
Juan Pablo Isaza
2 Respuestas
Responde la pregunta0
Qué pasa
<style> .wrapper{ position: relative; } a{ display: block; width: 300px; height: 150px; background-color: lightgray; border-radius: 1rem; } button{ position: absolute; bottom: .5rem; left: .5rem; padding: .5rem; background-color: black; border-radius: .5rem; color: white; } </style> <div class="wrapper"> <a href="https://codepen.io/" target="_blank"></a> <button type="button" onclick="alert('Fired!')">Button</button> </div>
·
Juan Pablo Isaza
Denunciar
0
Podría hacerlo con Javascript por la forma en que dijo @ChrisG, con .stopPropagation() o .preventDefault() .
O si desea hacerlo solo con css, puede agregar un contenedor de tarjeta, dentro de una etiqueta y un botón como este:
<div class="container"> <a href="#"></a> <button></button> </div> Luego haga la position: relative; y la position:absolute; para colocarlo encima de la etiqueta <a> . U también necesitará z-index para colocarlo arriba.
·
Juan Pablo Isaza
Denunciar
Responde la pregunta