sobre un elemento html (en mi caso un icono de lupa) quiero que al hacer hover me muestre una imagen, el caso es que la imagen tiene que estar por encima de la lupa una vez que entro en hover y si bien funciona no lo hace todo lo bien que deberia ya que se produce un bucle infinito entre la imagen y la lupa al censar el hover (ver con la consola), dejo ejemplo:
document.addEventListener("mouseover", function(e){
console.log(e.target);
},false);
*{
padding:0;
margin:0;
}
.lupa{
background: teal;
width:100px;
height: 100px;
position: relative;
}
.lupa:hover ~ .imagen{
display:block;
}
.imagen{
background: tomato;
width: 500px;
height: 500px;
position: absolute;
top:0;
left:0px;
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="lupa">LUPA</div>
<div class="imagen">IMAGEN</div>
</body>
</html>
como podria subsanar este problema? seria algo como detener la propagacion del hover? La imagen tiene que ir si o si encima de la lupa una vez entra en hover
una solucion que se me ocurrio es hacer un span que este por encima de todo con posicion relativa a la lupa y dandole una opacidad 0 aun el hover lo toma, pero no se como hacer el hover en el css ya que el span ya no es el siguiente hermano de imagen, pongo ejemplo:
*{
padding:0;
margin:0;
}
.lupa{
background: teal;
width:100px;
height: 100px;
position: relative;
}
.lupaFake:hover ~ .imagen{
display:block;
}
.imagen{
background: tomato;
width: 500px;
height: 500px;
position: absolute;
top:0;
left:0px;
display: none;
}
.lupaFake{
position: absolute;
height: 100%;
width: 100%;
top:0;
left:0;
background: turquoise;
z-index: 1;
opacity:0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="lupa">LUPA <span class="lupaFake"></span></div>
<div class="imagen">IMAGEN</div>
</body>
</html>