Potrzebna optymalizacja [prosty efekt typu :hover] - obsługa zdarzeń

Uczę się JavaScript i w końcu pojawiła się konieczność by go wykorzystać, pseudoklasy nie dają możliwości zdefiniowania zmiany stylu jednego selektora gdy zmienia się inny, a tego akurat potrzebuje. Napisałem kod, który działa ale wyglądać będzie fatalnie, gdyż jest redundacja - bez sensu na moje oko:

coś takiego powinno odpalić. niestety efekt jest połowiczny, link nie zmienia koloru na biały:

function init() {
	var li = document.getElementsByClassName("li_no_effects");
	var a = document.getElementsByClassName("a_no_effects");
        
    for (var i = 0; i < 4; i++) {
        li[i].onmouseover = function() {
            this.style.backgroundColor = '#003C3C';
            a[i].style.color = "white";        
	};
	li[i].onmouseout = function() {
            this.style.backgroundColor = '#fbfbfb';
            a[i].style.color = "#3299CC";
	};
    }      
}
window.onload = init;

Pomożecie? Pisanie x4 tego samego aż boli, ale wtedy działa :)

pseudoklasy nie dają możliwości zdefiniowania zmiany stylu jednego selektora gdy zmienia się inny

Jak to nie? Przykład: .my-div:hover .costam.
Opisz jak konkretnie wygląda Twój przypadek.

<article>
            <h1>Publikacje:</h1>
            <h2 id="kultura_i_kino">Kultura i kino</h2>
            <ul>
                <li class="li_no_effects">
                    <img src="img/ico_pdf.png" alt="document icon"/>
                    <a class="a_no_effects" href="txt/Oniryczne_srodki_wyrazu-Petla_Hasa..pdf">
                    Mechanizm komunikowania emocji za pomocą gry aktorskiej 
                    i onirycznych środków wyrazu w filmie „Pętla” Wojciecha Jerzego Hasa.</a>
                </li>
                <li class="li_no_effects">
                    <img src="img/ico_pdf.png" alt="document icon"/>
                    <a class="a_no_effects" href="txt/Sanatorium_pod_Klepsydra_Hasa-Labirynt_czy_klacze.pdf">„Sanatorium pod Klepsydrą” Wojciecha
                    Jerzego Hasa – Labirynt czy kłącze ?
                    </a>
                </li>
            </ul>
            <h2 id="technologie_i_komputery">Technologie i komputery</h2>
            <ul>
                <li class="li_no_effects">
                    <img src="img/ico_pdf.png" alt="document icon"/>
                    <a class="a_no_effects" href="txt/Java EE - SEKP.pdf">System ewidencji kompetencji pracownika - aplikacja w JAVA EE</a>
                </li>            
                <li class="li_no_effects">
                    <img src="img/ico_pdf.png" alt="document icon"/>
                    <a class="a_no_effects" href="txt/Budowanie_stron_w_HTML5.pdf">Sposoby tworzenia interaktywnych stronych internetowych - HTML5</a>
                </li>
            </ul>    
        </article>

Tak, mniej więcej. Li określa pola hiperłącza, które ma się stać "jakby-aktywne" po najechaniu na ten box. Pewnie można w CSS ale nie wpadłem na to jak połączyć efekty, "zagnieździć" :hover w :hover. JavaScript wydaje się dobrym rozwiązaniem.

Patryk27 napisał(a):

pseudoklasy nie dają możliwości zdefiniowania zmiany stylu jednego selektora gdy zmienia się inny

Jak to nie? Przykład: .my-div:hover .costam.
Opisz jak konkretnie wygląda Twój przypadek.

Pomoc przydatna, ale ciekawi mnie czemu zaprezentowana konstrukcja nie działa:

function init() {
    var li = document.getElementsByClassName("li_no_effects");
    var a = document.getElementsByClassName("a_no_effects");
 
    for (var i = 0; i < 4; i++) {
        li[i].onmouseover = function() {
            this.style.backgroundColor = '#003C3C';
            a[i].style.color = "white";        
    };
    li[i].onmouseout = function() {
            this.style.backgroundColor = '#fbfbfb';
            a[i].style.color = "#3299CC";
    };
    }      
}
window.onload = init;

zmienna i jest undefined w onmouseover, onmouseout
można tak

this.style.backgroundColor = '#003C3C';
this.querySelector("a").style.color = "yellow";

lub użyć clojure

for (let i = 0; i < 4; i++) {
  ((listItem, link) => {
      listItem.onmouseout = () => {
        listItem.style.backgroundColor = '#fbfbfb';
        link.style.color = "#3299CC";           
      }
      li[i].onmouseover = () => {
        li[i].style.backgroundColor = '#003C3C';
        a[i].style.color = "yellow";           
      }
    })(li[i], a[i]);         
}

reptile333 napisał(a):

zmienna i jest undefined w onmouseover, onmouseout
można tak

this.style.backgroundColor = '#003C3C';
this.querySelector("a").style.color = "yellow";

lub użyć clojure

for (let i = 0; i < 4; i++) {
  ((listItem, link) => {
      listItem.onmouseout = () => {
        listItem.style.backgroundColor = '#fbfbfb';
        link.style.color = "#3299CC";           
      }
      li[i].onmouseover = () => {
        li[i].style.backgroundColor = '#003C3C';
        a[i].style.color = "yellow";           
      }
    })(li[i], a[i]);         
}

a da się bez clojure ?

Da sie. Domkniecie w tym przypadku nie jest potrzebne, wystarczy zmienić deklaracje zmiennej i w pętli z var na let i wszytko wróci do normy https://jsfiddle.net/k0a34ehL/. Dodatkowo tak zdarzeń się nie podpina do kilku elementów naraz. Poczytaj sobie o event delegation.

owca_82 napisał(a):

Da sie. Domkniecie w tym przypadku nie jest potrzebne, wystarczy zmienić deklaracje zmiennej i w pętli z var na let i wszytko wróci do normy https://jsfiddle.net/k0a34ehL/. Dodatkowo tak zdarzeń się nie podpina do kilku elementów naraz. Poczytaj sobie o event delegation.

let to słowo kluczowe, zawsze to mały w nauce JavaScript a wielki dla początkującego. Dzięki.