Cómo hacer que la imagen 1 desaparezca y la imagen 2 aparezca al hacer clic con el mouse momentáneamente con css

Supongo que lo que quieres decir es tener imagen-1 e imagen-2 donde la imagen-2 está oculta y cuando haces clic en la imagen-1, aparece la imagen-2. Así es como se hace esto con vainilla javascript:

// Encuentra el elemento que necesitas (funciona si su ID es única en este caso)
elemento varHideHide = document.getElementsByClassName (“image-1”),
elementShow = document.getElementsByClassName (“imagen-2”);

// Este es el evento onclick + la funcionalidad que necesitas
elementoHide [0] .onclick = function () {
// Verificación simple para agregarlo solo una vez.
if (! hasClass (elementoHide [0], ‘está oculto’))
elementoHide [0] .className + = “está oculto”;

elementShow [0] .classList.remove (“está oculto”);
};

// Función simple para ver si existe la clase.
función hasClass (elemento, cls) {
return (” + element.className + ”) .indexOf (” + cls + ”)> -1;

Luego está la forma más fácil de hacer esto con jQuery si ese es tu caso.

jQuery (‘. image-1’). on (“click”, function () {
jQuery (‘. image-2’). removeClass (‘está-oculto’);
$ (this) .addClass (‘está oculto’);
});

Lo que sea que uses, ambos funcionarán. Se aprovechan para mostrar elementos usando CSS. Puede animarlos fácilmente de esa manera mientras mantiene altas tasas de FPS. Puede tener en lugar de mostrar: ninguno; bloqueo de pantalla

Puedes tener algo como esto en la clase .is-hidden:

.Está oculto {
opacidad: 0;
transición: 0.6s;
transformar: escala (0);
eventos de puntero: ninguno; // No permitir hacer clic en el elemento.
}

y cuando se elimina la clase (es decir, en el selector de clase principal) tiene:

.image-0 {
opacidad: 1; // Hazlo visible
transición: 0.6s;
transformar: escala (1); // Devuélvelo a la normalidad
puntero-eventos: auto; // Haz que se pueda hacer clic nuevamente
}

¿Cómo puedo agregar mi propia imagen enlazando con un enlace afiliado en todos los medios / fondos de las publicaciones de WP?

¿Cómo, como desarrollador junior, comienzo a leer el código de un marco JavaScript de código abierto para aprender de él?

¿Cuál es la cosa más loca e increíble que un IITian ha hecho?

¿Dónde suelen tener reuniones las startups?

¿Qué hay en la compra de aplicaciones mencionada en la descripción de las aplicaciones donde se escriben los importes pero obtenemos la aplicación gratis?

¿Cuál es la mejor aplicación de eventos?

Necesitas JavaScript para hacer eso.

Algo como esto

# someDiv.onClick (function () {

img1.hide ().

img2.show ();

});

Ford Dyce

¿Qué hay de esto?

# pic1 {
/ * Arbitrario, pero debe ser el mismo que pic2 si las dimensiones de la imagen son diferentes * /
ancho: 500 px;
altura: 800 px;
ancho máximo: 800px;
altura máxima: 500 px;
posición: absoluta;
}

# pic2 {
/ * Arbitrario pero debe ser el mismo que pic1 si las dimensiones de la imagen son diferentes * /
ancho: 500 px;
altura: 800 px;
posición: absoluta;
ancho máximo: 800px;
altura máxima: 500 px;
opacidad: 0;
-webkit-transition: opacidad 1s;
transición: opacidad 1s;
}

# pic1: pase el cursor ~ # pic2, # pic2: pase el cursor {
opacidad: 1;
}

Entonces, simplemente cambia la opacidad de `pic2` al pasar el mouse, también puedes agregar la opacidad de` pic1` a 0 si de alguna manera tus dimensiones no son las mismas.

Alex Dimitrov

Puedes hacer esto sin JavaScript

.oculto{
altura: 0;
ancho: 0;
}

.hidden: marcado + img {
pantalla: ninguno;
}