Estoy tratando de codificar una pequeña 'tarjeta' que tiene una imagen, que cuando pasas el mouse, la imagen se desvanece y muestra un botón en el que estoy tratando de hacer que se pueda hacer clic. El problema es que no se puede hacer clic en el botón ya que está debajo de la imagen y cuando hace clic en él, se registra como un clic en la imagen. Sé que podría hacerlo para que el usuario pueda simplemente hacer clic en la imagen, pero eso no funciona bien en dispositivos móviles, ya que no puedes desplazarte sin hacer clic.
Aquí está mi HTML: (nota: esta es una versión básica de mis tarjetas reales)
.center { text-align: center; } img.rounded-corners { border-radius: 30px; background-color: rgba(29, 30, 40, 1); } .btn btn-primary { position: absolute; top: 50%; } .card { //background: #1D1E28; background-color: transparent; position: relative; height: 500px; width: 500px; margin: 0 auto; } .card img { position: absolute; left: 0; opacity: 1; -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; } .card img:hover { opacity: 0; } <div class="card" style="height: 18rem; width: 18rem;"> <img src="https://icon-library.com/images/black-discord-icon/black-discord-icon-19.jpg" class="card-img-top rounded-corners guildimg" alt="..."> <div class="card-body" style="height: 172px;"> </div> <div class="card-body"> <button class="btn btn-primary btn-lg manage-btn" target="_blank" role="button">Manage server</button> </div> </div>La solución que veo podría ser si el controlador de desplazamiento estará en .card:hover img no .card img:hover . Y elimine el evento de la imagen con pointer-events: none;
.card:hover img { opacity: 0; pointer-events: none; } document.querySelector('button').addEventListener('click', ev => { console.log('click'); ev.target.textContent = 'cliked'; }); .center { text-align: center; } img.rounded-corners { border-radius: 30px; background-color: rgba(29, 30, 40, 1); } .btn btn-primary { position: absolute; top: 50%; } .card { background: #1d1e28; background-color: transparent; position: relative; height: 500px; width: 500px; margin: 0 auto; } .card img { position: absolute; left: 0; opacity: 1; -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; } .card:hover img { opacity: 0; pointer-events: none; } <div class="card" style="height: 18rem; width: 18rem"> <img src="https://icon-library.com/images/black-discord-icon/black-discord-icon-19.jpg" class="card-img-top rounded-corners guildimg" alt="..." /> <div class="card-body" style="height: 172px"></div> <div class="card-body"> <button class="btn btn-primary btn-lg manage-btn" target="_blank" role="button"> Manage server </button> </div> </div>