używanie getElementByClassName i przyciemnianie strony

Question

Witam. Aktualnię trudzę się JS'em i mam problem z przyciemnieniem strony gdy najeżdza się na jakiś item. 
Mój projekt wygląda tak: 
 

var Catch = document.getElementsByClassName("tile");
var cover = document.querySelector(".cover");
function dim()
{
    cover.style.opacity = "0.5";
}
function NoDim()
{
    cover.style.opacity = "0";
}
for(i=0;i<Catch.length;i++)
{
    Catch[i].addEventListener("mouseover",dim)
    Catch[i].addEventListener("mouseout",NoDim)
}

 

Ten kod pozwala mi na zaznaczenie wszystkich kafelek,ale po najechaniu na jedną wszystkie się "świecą".

Wygląda to tak: https://imgur.com/a/4e32Z

Mają ustawiony z-index na 2 a div, który zaciemnia stronę ma z-index:1.

I tutaj pojawia się moje pytanie, w jaki napisać kod aby tylko kafelek, na który aktualnie najeżdżam miał z-index:2 a reszta mniejszy, czyli żeby się schowały pod przyćmieniem?

Answer 1

W tym przypadku JS jest całkowicie zbędny. Użyj po prostu :hover w CSS.