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

Hover obrazkow, mouseon

VPS Starter Arubacloud
0 głosów
360 wizyt
pytanie zadane 11 września 2017 w HTML i CSS przez Apper97 Obywatel (1,380 p.)

witam. 

Mam pytanko, jak nadac klase dla zmienionego obrazka podczas najechania na niego myszka? Chce nadac mu klase, aby po najechaniu myszka obraz zmienil sie lecz zostal w tych samych wymiarach co obraz bez najechania myszki. Moj kod wyglada tak:

onmouseover="this.src='http://bit.ly/2eWVML9'" 
onmouseout="this.src='http://bit.ly/2vNPD7b'"

jak widac wyzej, sa 2 obrazki w moim projekcie. Podstawowy to mouseout, jego wymiary sa ustalone juz w css. Natomiast nie mam pojecia jak ustawic wymiary tego obrazka podanego do 'onmouseout' jak porzypisac do niego klase aby moc w css go modyfikowac?

4 odpowiedzi

+1 głos
odpowiedź 11 września 2017 przez EdeX Mądrala (5,110 p.)
wybrane 11 września 2017 przez Apper97
 
Najlepsza
mozesz użyć do tego css i co najwyżej ci podpowiem że hover oraz background-image ci pomoże
komentarz 11 września 2017 przez Apper97 Obywatel (1,380 p.)
jak konkretnie do tych 2 obrazkow uzyc css? nadac klase dla podstawowego obrazka, i css uzyc klasy i funkcji hover?
komentarz 11 września 2017 przez EdeX Mądrala (5,110 p.)
możesz nadać w html dwa obrazki na siebie tak aby jeden zakrył drugi i po najechaniu na 1 obrazek zmienić display na none
komentarz 11 września 2017 przez Apper97 Obywatel (1,380 p.)

jezeli dodalem w css taki kod 

.sasuke{
  width:205px;
  margin-left:70px;
 
}
.sasuke:hover {
    background-image: url('http://bit.ly/2gY95Yy');
}

kompltenie nie dziala, na obrazku tworzy sie nie wiadomio co ;/

komentarz 11 września 2017 przez EdeX Mądrala (5,110 p.)
html

<img src alt calss="test1"/>

<img src alt class="test2"/>

css

.test1{position:relative}

.test1:hover{display:none;}

.test2{position:absolute}

 

albo

 

html

<img src alt calss="test1"/>

<img src alt class="test2"/>

css

.test1{position:relative; display:block;}

.test1:hover{display:none;}

.test2{position:absolute; display:none

.test2:hover{display:block;}
komentarz 11 września 2017 przez Apper97 Obywatel (1,380 p.)
spoko wszystko git, tylko gdy nachodze myszka na obrazek to bez ustannie zmienia sie ze oko nie jest w stanie tego wychwycic, i nachodzi na nie tekst ktory jest ponizej obrazka
komentarz 11 września 2017 przez Apper97 Obywatel (1,380 p.)
uzylem takiego czegos:

.sasuke:hover {
    content: url('http://bit.ly/2gY95Yy');
    width:179px;

i jest okej
+3 głosów
odpowiedź 11 września 2017 przez sc4rface Dyskutant (7,710 p.)
Jeżeli dobrze rozumiem Twój zamysł - nie lepiej byłoby to wykonać za pomocą zwykłego CSS'a?
+1 głos
odpowiedź 11 września 2017 przez Kamil Łydka Stary wyjadacz (13,600 p.)
Skorzystaj z .classList
+1 głos
odpowiedź 11 września 2017 przez Jedras Maniak (54,860 p.)
Poczytaj o addEventListener w JS.

Klasę możesz dodać do elementu za pomocą metody add (https://developer.mozilla.org/en-US/docs/Web/API/Element/classList). Jednak jeśli chodzi tylko o zmianę właściwości CSS to lepsze byłoby użycie hover w CSS.

Podobne pytania

0 głosów
1 odpowiedź 210 wizyt
pytanie zadane 19 listopada 2017 w HTML i CSS przez xshaoox Początkujący (280 p.)
0 głosów
1 odpowiedź 391 wizyt
pytanie zadane 8 września 2017 w HTML i CSS przez Radek Begej Użytkownik (580 p.)
0 głosów
2 odpowiedzi 298 wizyt

92,451 zapytań

141,261 odpowiedzi

319,073 komentarzy

61,853 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.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...