¿Cómo podría alguien usar ‘hover’ en un diseño web para pasar sobre una imagen de caja flexible y hacer que parezca más grande en un lugar específico en el mapa?

Answer 1

Hay dos métodos diferentes para hacer esto, y recomendaría una forma si es solo una cosa específica que aparece al pasar el mouse (como un símbolo del zodiaco), o si esa cosa puede tomar muchos valores diferentes (como una imagen rez más alta).

Si solo está usando una cosa específica que aparece en el desplazamiento, le recomiendo usar el selector: after . Esto le permite especificar un nuevo bloque (llamado pseudo-elemento) con su propia posición, altura, ancho, etc.

Puede combinar el selector :hover con el selector :after para hacer que el bloque: after solo aparezca cuando pasa el cursor sobre el bloque original.

Por ejemplo, si su caja gris tenía una clase .gray-box :

.gray-box: hover: después de {
background-image: url (“mi-imagen.png”);
}

También puede usar la propiedad de contenido para especificar cualquier texto que desee que aparezca dentro del cuadro.

Este método es bueno porque puedes reutilizar esa clase CSS fácilmente. De esa manera, puede pasar el mouse sobre uno de los muchos elementos diferentes y hacer que aparezca el mismo contenido.

Sin embargo, si tiene muchas imágenes diferentes, no desea tener que agregar CSS para cada imagen individual, puede darle al cuadro un elemento secundario configurado para display: none de forma predeterminada. Luego, cuando pasa el cursor sobre el elemento, puede configurarlo para que se display: block (o lo que se adapte a sus propósitos) usando el selector secundario CSS para hacerlo visible. Ejemplo:

.child-box {
pantalla: ninguno;
}
.gray-box: hover> .child-box {
bloqueo de pantalla;
}

Si está utilizando una imagen en miniatura, es posible que desee que el cuadro que detecta el desplazamiento sea uno de los elementos primarios de la imagen en miniatura y la imagen completa.

Espero que esto ayude. Si tiene alguna pregunta, hágamelo saber en los comentarios.