¿Cómo escribir el código para los efectos especiales del mouseover para que el más grande aparezca al lado del más pequeño con el mouse?
Cabe señalar que copie el siguiente código y guárdelo como un archivo con el sufijo html; debe colocar las dos imágenes en el mismo directorio; , el cuadro pequeño . Imagen jpg grande. jpg.
El efecto es el siguiente: pase el mouse sobre la imagen pequeña para mostrar la imagen grande; mueva el mouse hacia afuera para ocultar la imagen grande.
Problema: el posicionamiento requiere que los lectores lo experimenten ellos mismos, por lo que es muy vago. ¡Gracias por compartir arriba!
<! tipo de documento? html & gt
& lthtml & gt
& lthead & gt
& ltmeta? charset = utf-8>
</head>
<body>
Quieres mostrar el html con efectos especiales.
<img? Src= "Imagen pequeña.jpg"? ancho="200px"? altura="200px "? id="pequeñaimg"? onmouseout="hoverHiddendiv()"? onmouseenter="hoverShowDiv()"? /& gt;
& ltdiv? estilo = "ancho: 200 px; alto: 80 px borde: 1 px? sólido? # aaccff pantalla: ninguna; "? id="divHover"? & gt
La imagen grande es la siguiente.
<img? Src= "Imagen grande.jpg"? ancho="500px"? altura="300px "? id="bigimg"? /& gt;
& lt/div & gt;
& ¿Secuencia de comandos? type = " texto/JavaScript ">
¿Dejar? div¿Hover? =?document . getelementbyid(" div hover ");
¿Función? hoverShowDiv()? {
Console.log("Mostrar imagen grande");
divHover.style.display? =?"Bloquear";
divHover.style.top? =?documento getelementbyid("pequeña img")estilo. +?10;
divHover.style.left? =?documento.getelementbyid("pequeña img")¿estilo? +?10;
}
¿Función? hoverHiddendiv()? {
Console.log("Mostrar miniatura");
divHover.style.display? =?"Ninguno";
}
& lt/script & gt;
& lt/body & gt;
& lt/html>