1

En el siguiente código tengo tres botones con links a diferentes páginas, el problema es que entre los botones no deja de estar el link, yo necesito que el link sólo se muestre cuando paso el puntero por los botones y no por fuera de estos:

            <div class="row mb-3" >
                <div class ="col d-flex justify-content-center"  type="button" routerLink="/registro-diario" >
                    <img class="img-fluid" src="/assets/img/btn-submenu-regAct/1reg-diario.png" alt="MDB Logo"
                        loading="lazy" width="100" />
                </div>
                <div class="col d-flex justify-content-center"  type="button" routerLink="/novedades-form"  >
                    <img class="img-fluid d-flex align-items-center " src="/assets/img/btn-submenu-regAct/2novedades.png" alt="MDB Logo"
                        loading="lazy" width="100" />
                </div>
                <div class="col d-flex justify-content-center"  type="button" routerLink="/dist-horaria" >
                    <img class="img-fluid" src="/assets/img/btn-submenu-regAct/3distib-horaria.png" alt="MDB Logo"
                        loading="lazy" width="100" />
                </div>
            </div>
            <div class="row fuente fs-5">
                <div class="col d-flex  justify-content-center" >
                    <div >Registro Diario</div>
                </div>
                <div class="col d-flex justify-content-center" >
                    <div >Novedades</div>
                </div>
                <div class="col d-flex justify-content-center" >
                    <div class="text-center" >Distribucion horaria</div>
                </div>
            </div>

Pongo captura de pantalla de lo que no quiero que pase, pero no sé como solucionar:

imagen del problema

Perdón por la improligidad de la imagen, si hago una captura de pantalla no toma el puntero.

1
  • El problema es que tu elemento de columna es a la vez un botón. Debes o bien encerrar la imagen dentro de su propio botón y centrarlo en la columna. Commented el 14 jul. 2023 a las 15:36

2 respuestas 2

1

Semánticamente hablando, una imagen no debería ser usada como un botón.

Una forma de resolver el problema es envolver la imagen en un botón o incluso en un elemento tipo anchor.

Por ejemplo, usando un botón como envoltorio de la imagen, (realmente estamos usando una imagen dentro del botón):

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="row mb-3" >
    <div class ="col d-flex justify-content-center">
      <button type="button" routerLink="/registro-diario" class="btn btn-link" width="100" aria-label="MDB Logo">
        <img class="img-fluid" src="/assets/img/btn-submenu-regAct/1reg-diario.png" alt="MDB Logo" loading="lazy" width="100" />
      </button>
    </div>
    <div class="col d-flex justify-content-center">
      <button  type="button" routerLink="/novedades-form" class="btn btn-link" width="100" aria-label="MDB Logo">
        <img class="img-fluid d-flex align-items-center " src="https://placehold.co/100" alt="MDB Logo" loading="lazy" width="100" />
      </button>
    </div>
    <div class="col d-flex justify-content-center">
      <button type="button" routerLink="/dist-horaria" class="btn btn-link" width="100" aria-label="MDB Logo">
        <img class="img-fluid" src="/assets/img/btn-submenu-regAct/3distib-horaria.png" alt="MDB Logo" loading="lazy" width="100" />
      </button>
    </div>
</div>
<div class="row fuente fs-5">
    <div class="col d-flex  justify-content-center" >
        <div >Registro Diario</div>
    </div>
    <div class="col d-flex justify-content-center" >
        <div >Novedades</div>
    </div>
    <div class="col d-flex justify-content-center" >
        <div class="text-center" >Distribucion horaria</div>
    </div>
</div>

La razón es muy simple: hay navegadores de solo texto y podrían simplemente ignorar cualquier imagen, por lo cual la funcionalidad de "botón" no estaría presente, dejando la navegación rota.

Es por ello que usamos el atributo aria-label para indicar el propósito del botón. En este caso he usado el texto "MDB Logo", pero deberías usar un valor más adecuado, como por ejemplo: "registro-diario", "novedades" y "dist-horaria".

1

Facil, las propiedades type="button" routerLink="/tuRuta" ponlas en las imágenes y no en el div contenedor de las imagenes.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row mb-3" >
                <div class ="col d-flex justify-content-center" >
                    <img class="img-fluid" type="button" routerLink="/registro-diario" src="https://pngimg.com/uploads/buttons/buttons_PNG1.png" alt="MDB Logo"
                        loading="lazy" width="100" />
                </div>
                <div class="col d-flex justify-content-center" >
                    <img class="img-fluid d-flex align-items-center " type="button" routerLink="/novedades-form" src="https://pngimg.com/uploads/buttons/buttons_PNG20.png" alt="MDB Logo"
                        loading="lazy" width="100" />
                </div>
                <div class="col d-flex justify-content-center" >
                    <img class="img-fluid" type="button" routerLink="/dist-horaria" src="https://pngimg.com/uploads/buttons/buttons_PNG148.png" alt="MDB Logo"
                        loading="lazy" width="100" />
                </div>
            </div>
            <div class="row fuente fs-5">
                <div class="col d-flex  justify-content-center" >
                    <div >Registro Diario</div>
                </div>
                <div class="col d-flex justify-content-center" >
                    <div >Novedades</div>
                </div>
                <div class="col d-flex justify-content-center" >
                    <div class="text-center" >Distribucion horaria</div>
                </div>
            </div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.