Feature kojem ne znam ime

Web dizajn i grafika
1

Našao sam nešto na drugom webshopu što mi se sviđa, a ne znam kako se zove niti kako izvesti.

Na element je zakvačen hover koji aktivira prikaz novog elementa koji ostaje aktivan sve dok je cursor na njemu. Kada cursor nije na njemu, gasi se nakon par sekundi.

Konkretno, na webshopu instar-informatika hr, stavite u košaricu jedan proizvod i dođite mišem iznad košarice.

Eto, ako netko zna… Tnx

2

Mislim da je ovo najjednostavnije uraditi preko JS na način da koristiš neki mouse event (mouseover i mouseleave) koji onda dodaje/uklanja CSS klasu sa HTML elementa, koja sakriva/prikazuje ovaj dropdown sa korpom. Ako malo bolje pogledaš vidjećeš da i na tvom primjeru rade nešto slično tako što dodaju i uklanjaju .show klasu na HTML element.

Nisam godinama nista pisao u JS, ali koliko se sjecam ovako sam nekako rješavao slične situacije.

1 Like
3

"Ovo se može postići pomoću CSS-a i JavaScript-a.

Prvo, trebate dodati hover efekt na element koji će aktivirati prikaz novog elementa. To se obično postiže pomoću CSS-a i pseudoklase “:hover”. Na primjer:

cssCopy code

.element:hover {
   /* CSS stilovi za prikaz novog elementa */
}

Zatim, trebate dodati novi element koji će se prikazati kada korisnik uđe u hover stanje. Ovo se također može postići pomoću CSS-a. Na primjer:

cssCopy code

.element:hover .novi-element {
   /* CSS stilovi za novi element */
}

Ovdje “.novi-element” je novi element koji želite prikazati.

Konačno, trebate dodati JavaScript kod koji će omogućiti zadržavanje novog elementa prikazanog dok je cursor na njemu i gašenje nakon nekoliko sekundi kada korisnik mišem ode s elementa. Ovo se može postići pomoću setTimeout i clearTimeout funkcija.

Na primjer:

javascriptCopy code

let timeout;

function showNewElement() {
   clearTimeout(timeout);
   document.querySelector('.novi-element').style.display = 'block';
}

function hideNewElement() {
   timeout = setTimeout(function() {
      document.querySelector('.novi-element').style.display = 'none';
   }, 2000);
}

document.querySelector('.element').addEventListener('mouseover', showNewElement);
document.querySelector('.element').addEventListener('mouseout', hideNewElement);

U ovom kodu, funkcija “showNewElement” prikazuje novi element i briše prethodni timeout, dok funkcija “hideNewElement” postavlja novi timeout koji će ukloniti novi element nakon 2 sekunde. Na kraju, koristimo “addEventListener” funkciju da dodamo događaje na “.element” koji će pozvati ove funkcije."

Nisam neki strucnjak, ali evo sta nas prijatelj Chatgpt kaze, meni je ovih dana dosta kodova ispisao :smiley: , dopisuj se s njim pa ces rijesiti ako neko bolje ne objasni.

1 Like
4

Hvala momci, probam pa javim.