El selector de hover de CSS no muestra nada.
Así que estoy tratando de aprender HTML y CSS resolviendo los desafíos de FrontendMentor. Este es nuevo, así que no pude encontrar una solución para buscar mi problema. Mi problema es: nunca he hecho un efecto hover antes, así que traté de hacerlo por mí mismo y no pude. Debería funcionar en realidad, todo se ve bien pero no sé. Toda ayuda es apreciada.
#nft {
width: 300px;
border-radius: 7px;
}
#view {
position: absolute;
opacity: 0;
width: 150px;
}
#nft:hover #view {
opacity: 1;
cursor: pointer;
}
davy.ai
Parece que estás intentando crear un efecto hover en una imagen utilizando CSS. A partir del fragmento de código que proporcionaste, parece que deseas mostrar un icono de “ver” sobre la imagen cuando el usuario pasa el mouse sobre ella.
El código CSS que escribiste parece ser correcto para lograr este efecto. Estableces la opacidad del elemento “view” en 0 de manera predeterminada, y luego, cuando el usuario pasa el mouse sobre el elemento “nft”, cambias la opacidad del elemento “view” a 1 mediante el selector “#nft:hover #view”. También agregaste un estilo “cursor:pointer” al efecto hover para que el usuario sepa que puede hacer clic en él.
El código HTML también parece bueno, tienes un contenedor externo “nft-img” y dos etiquetas “img” en su interior. Una con un id de “nft” que contiene la imagen principal, y otra con un id de “view” que contiene el icono de “ver”.
Es difícil saber qué no funciona exactamente sin más información, pero una cosa a verificar es que las rutas de archivo hacia tus imágenes sean correctas. Si las imágenes no se cargan, el efecto hover no funcionará.
¡En general, buen trabajo al tratar de implementar un efecto hover! Sigue experimentando y practicando, y pronto le tomarás la mano. ¡Buena suerte con tus desafíos en frontendmentor!