Hover obrazkow, mouseon

Question

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?

Answer 1

mozesz użyć do tego css i co najwyżej ci podpowiem że hover oraz background-image ci pomoże

Comments

jak konkretnie do tych 2 obrazkow uzyc css? nadac klase dla podstawowego obrazka, i css uzyc klasy i funkcji hover?

---

możesz nadać w html dwa obrazki na siebie tak aby jeden zakrył drugi i po najechaniu na 1 obrazek zmienić display na none

---

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

---

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

---

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

---

uzylem takiego czegos:

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

i jest okej

Answer 2

Jeżeli dobrze rozumiem Twój zamysł - nie lepiej byłoby to wykonać za pomocą zwykłego CSS'a?

Answer 3

Skorzystaj z .classList

Answer 4

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.