time delay onmouseover

Question

Hej.

Można jakoś w tym kodzie ustawić, aby zmiana obrazka była płynna przy najeździe i wyjeździe myszką?

<img class="imglogo" src="P3images/logov1.png" onmouseover="this.src = 'P3images/logo.png'" onmouseout="this.src = 'P3images/logov1.png'">

 

Comments

W tym kodzie będzie ciężko

---

Tak na przyszłość, staraj się unikać mieszania kodu JS z HTMLem. Takie coś robiło się kilka lat temu, teraz mamy nowe rzeczy, np. addEventListener().

---

Ok, wydawało mi się że uproszczę, ale w takim razie pokombinuję w samym js xd

---

Myślę, że zwykła podmiana obrazka może być zrealizowana w samym CSS korzystając z pseudoklasy hover.

---

kombinowałam tak, ale mój obrazek to nie background, chyba że jest jeszcze coś czego nie udało mi się znaleźć ^^

Answer 1

Musisz zrobić dwa obrazki na sobie. Aby były na sobie skorzystaj z position:absolute i relative w CSS. Gdy już będziesz miał dwa obrazki na sobie Ukryj ten który jest widoczny z przodu poprzez opacity:0 w CSS. Następnie w CSS dodaj hover który zmieni opacity na 1.

Dzięki temu będziesz miał obecną funkcjonalność. Ostatnim krokiem będzie dodanie w CSS transition (przejścia) dzięki czemu zyskasz płynne przejście między obrazkami.

Do tego wszystko będzie śmigać bez JavaScript ;)

Comments

O kurczę, ale myk. Dziękuję, wypróbuję;)

Działa, potwierdzam dla potomnych:D

 

Niestety tylko u mnie oba obrazki mają przezroczyste elementy i nachodząc na siebie zamazują małe otworki, ale ogólnie świetna sprawa.

---

W CSS3 w selektorach możesz używać operatora plusa ;) Plus oznacza element obok innego elementu. Np masz taki HTML 

<div>
     <img class="obraz1" />
     <img class="obraz2" />
</div>

Wówczas gdy chcemy ukryć obraz2 po najechaniu na obraz1 budujemy taki selektor
 

.obraz1:hover + .obraz2{
     opacity:0;
}

Dzięki temu odpadnie ci problem przezroczystych obrazków ;)

---

Aa, ojej to jest boskie. Dziękuję:)