• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

time delay onmouseover

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
0 głosów
196 wizyt
pytanie zadane 26 maja 2018 w HTML i CSS przez niezalogowany

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'">

 

1
komentarz 26 maja 2018 przez niezalogowany
W tym kodzie będzie ciężko
komentarz 26 maja 2018 przez shotokan Nałogowiec (39,660 p.)
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().
komentarz 26 maja 2018 przez niezalogowany
Ok, wydawało mi się że uproszczę, ale w takim razie pokombinuję w samym js xd
1
komentarz 26 maja 2018 przez shotokan Nałogowiec (39,660 p.)
Myślę, że zwykła podmiana obrazka może być zrealizowana w samym CSS korzystając z pseudoklasy hover.
komentarz 26 maja 2018 przez niezalogowany
kombinowałam tak, ale mój obrazek to nie background, chyba że jest jeszcze coś czego nie udało mi się znaleźć ^^

1 odpowiedź

+1 głos
odpowiedź 26 maja 2018 przez rafal.budzis Szeryf (85,380 p.)
wybrane 26 maja 2018
 
Najlepsza
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 ;)
komentarz 26 maja 2018 przez niezalogowany
edycja 26 maja 2018
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.
komentarz 27 maja 2018 przez rafal.budzis Szeryf (85,380 p.)

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 ;)

komentarz 27 maja 2018 przez niezalogowany
Aa, ojej to jest boskie. Dziękuję:)

Podobne pytania

0 głosów
0 odpowiedzi 175 wizyt
pytanie zadane 5 listopada 2017 w PHP przez hoktaur Pasjonat (22,250 p.)
0 głosów
3 odpowiedzi 258 wizyt
pytanie zadane 11 września 2018 w JavaScript przez Oskar Szkurłat Bywalec (2,780 p.)

93,108 zapytań

142,085 odpowiedzi

321,607 komentarzy

62,449 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...