let etiqueta = document.querySelectorAll('.etiqueta'); etiqueta.forEach(link => { link.addEventListener("mouseover",() => { let hijo = link.querySelectorAll('.hijo'); hijo.forEach(l1=>{ l1.classList.add("edd1"); }); }); link.addEventListener("mouseleave",() => { let hijo = link.querySelectorAll('.hijo'); hijo.forEach(l1=>{ l1.classList.remove("edd1"); }); }); }); //css body{ display: flex; } .box{ width: 200px; height: 200px; border: solid 1px black; } .etiqueta{ width:100px; height:100px; position: absolute; left:50px; top:50px; background: green; overflow: hidden; position:relative; } .hijo{ position: absolute; width: 20px; height: 20px; border-radius: 50%; background-color: blue; transition: all 0.2s ease; transform: scale(0); /*desaparece el elemento hijo*/ } .edd1{ /* la class que se agrega y se quita*/ background-color: red; transform: scale(1); /*reaparece el elemento hijo con el mause al centro*/ }; //html <div class="box"> <div class="etiqueta"> <div class="hijo"></div> </div> </div> <div class="box"> <div class="etiqueta"> <div class="hijo"></div> </div> </div>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter