Quiero hacer que aparezca el enlace (.fm) mientras desplazo la imagen, pero mi código no funciona (cuando paso el enlace por el enlace, comienza a aparecer y desaparece rápidamente). Este es el código. Intenté usar el índice z pero no funcionó, también intenté cambiar de posición, pero sin éxito. ¿Algún consejo, por favor? ¿Pueden ayudarme escribiendo un código que funcione o corrigiendo el mío?
.fm a{ position:absolute; display: none; background-color: #5D5D5D; color:pink; padding:10px; } .caine1 img:hover + .fm a{ display:block; z-index: 1; } <div class="caine1"> <img src="1.png" width="400" height="250"></img> <div class="fm"> <a href="#" id="f1">Female</a> </div> </div>El código funciona, pero tiene retrasos al pasar el enlace .fm
Este es otro ejemplo pero usando javascript. Esto ayudará con su problema de que el enlace desaparezca tan rápido.
<!DOCTYPE html> <html lang="en"> <head> <style> .wrapper { width: 400px; height: auto; } .fm { position: absolute; padding: 10px; background-color: #5D5D5D; } a:link, a:visited, a:active { text-decoration: none; color: pink; } .caine1.fm { display: block; height: 250px; width: 400px; } .link { font-family: Verdana; font-size: 16px; color: crimson; z-index: 1; display: block; width: 400px; } .hiddenLink { display: none; } </style> </head> <body> <div class="wrapper"> <div id="myImage" class="caine1"> <img id="img" src="1.png" width="400" height="250"></img> <div id="link" class="hiddenLink"><a href="#" class="fm">This is my hidden link</a></div> </div> </div> <script> document.getElementById("myImage").addEventListener("mouseover", function() { document.getElementById("link").className = "link"; }); document.getElementById("img").addEventListener("mouseleave", function() { document.getElementById("link").className = "hiddenLink"; }); </script> </body> </html>Está usando mostrar ninguno, y no hay animación de transición en este componente. Display none es binario, lo que significa que no hay forma de animar esto. En su lugar, usa esto:
.fm a{ position:absolute; width: 0; height: 0; visibility: hidden; opacity: 0; background-color: #5D5D5D; color:pink; padding:10px; transition: all 1s ease-out } .caine1 img:hover + .fm a{ display:block; z-index: 1; width: 4rem; height: 1.5rem; font-size: 1rem; visibility: visible; opacity: 1; } <div class="caine1"> <img src="1.png" width="400" height="250"></img> <div class="fm"> <a href="#" id="f1">Female</a> </div> </div>