Jak za pomocą javascriptu zmienić style(css) elementu który jest hover?

Question

Cześć.

To mój css:

#komputer:hover {
text-decoration: underline;
}	

Tak jak jest niżej, zmieniłbym rodzaj podkreślenia na automatyczny gdyby chodziło mi o zwykły element komputer. Chodzi mi jednak o najechany element komputer(hover). W jaki sposób zmienić tę wartość?

document.getElementById("komputer").style.text-decoration = "none";    

 

Answer 1

Można to zrobić bez stylu w arkuszu, a za pomocą eventu. Nie wiem czy to ładny kod, ale działa.

document.getElementById("komputer").addEventListener("mouseover",function(){
  this.style.textDecoration = "underline";
})

document.getElementById("komputer").addEventListener("mouseout",function(){
  this.style.textDecoration = "none";
})

Edytowałem moją odpowiedź o drugiego eventa - z pierwszym underline zostawał na stałe po opuszczeniu tekstu.

 

 

 

Comments

Dzięki, działa.

Answer 2

Nie stylujemy po ID. To po pierwsze. Druga sprawa, to możesz sobie zrobić dodatkową klasę w css i nazwać ją jakkolwiek ci pasuje np. custom-underline (strzelam, bo nie wiem, co to dokładnie ma być) i robisz regułę dla klasy mniej więcej taką:

.custom-underline {
    text-decoration:underline;
}

Potem za pomocą js możesz nadawać tę klasę poszczególnym elementom za pomocą classList(link do dokumentacji). Tak chyba będzie najlepiej

Comments

Dzięki za odpowiedź, jednak twoje rozwiązanie raczej nie pomoże w tej sytuacji, albo nie rozumiem jak je zastosować.

Chodzi o to, że mam na stronie napis "Komputer" i po najechaniu na niego, pokazuje się pod nim podkreślenie. Po wciśnięciu tego napisu chciałbym, aby podkreślenie zniknęło, nie pojawiało się.

W jaki sposób mam użyć stworzonej przez Ciebie klasy, aby podkreślała napis po najechaniu?

---

Cześć Mimod, idąc tropem Kornelii potrzebujesz klasy, która będzie posiadała pseudoklasę typu hover, która jest odpowiedzialna za treść przy najechaniu.

.custom-underline:hover

Domyślnie możesz ją ustawić obok komputer

<div class="komputer custom-underline">komputer</div>

Ustawiasz event click za pomocą którego usuwasz klasę custom-underline

document.getElementsByClassName("komputer")[0].addEventListener("click",function(){
  this.classList.remove('custom-underline');
})

cały kod: https://codepen.io/anon/pen/YVWYRm

---

Właśnie o coś takiego mi chodziło.