JavaScript tutorial: Kako promijeniti boju elementa kada pređem mišem preko njega

Ovo je primjer JavaScript za promjenu boje dugmeta na hover.

Kloniraj lekciju

Postoje dva glavna načina kako ovo možemo postići:

1. Koristeći JavaScript događaje mouseenter i mouseleave:

// Dohvaćamo dugme pomoću ID-a 'myButton'
const button = document.getElementById('myButton');

// Dodajemo događaj za promjenu boje kada miš pređe preko dugmeta
button.addEventListener('mouseenter', function() {
    button.style.backgroundColor = 'blue';  // Postavljamo boju dugmeta na plavu
});

// Dodajemo događaj za vraćanje boje kada miš napusti dugme
button.addEventListener('mouseleave', function() {
    button.style.backgroundColor = 'red';   // Vraćamo boju dugmeta na crvenu
});

Objašnjenje:

• document.getElementById() – dohvaća element prema njegovom ID-u
• addEventListener() – dodaje “slušač” koji prati određeni događaj
• mouseenter – događaj koji se aktivira kada miš uđe preko elementa
• mouseleave – događaj koji se aktivira kada miš napusti element
• style.backgroundColor – svojstvo koje mijenja pozadinsku boju elementa

U ovom primjeru je dodano i nekoliko CSS stilova da dugme izgleda ljepše:

• transition svojstvo dodaje glatki prijelaz između boja
• padding i font-size određuju veličinu dugmeta
• border-radius zaobljuje rubove
• cursor: pointer mijenja pokazivač miša u ruku kada je iznad dugmeta