Cambia colore al passaggio del mouse css. Facile cambio di tonalità di colore

Практика

Теперь необходимо задать действие по наведению мышки. Как уже говорилось выше - делаем все при помощи стилей CSS (файл шаблона может называться style.css, css.css, core.css или еще как-то).

Catside a:hover {background: #0078BF; color: #fff;}

Данной строкой мы указали браузеру менять цвет заднего фона при наведении мышки на синий (#0078BF) и сказали что цвет шрифта должен стать белым (#fff). Сама "штука", позволяющая понять браузеру, что это нужно делать по наведению мышки - псевдокласс hover (о нем можно почитать

Здравствуйте уважаемые читатели блога webcodius! Часто получаю вопросы: как сделать так, чтобы картинка на web-страничке менялась при наведении на нее курсора мыши. Такой эффект встречается на многих сайтах и самый простой пример, это когда вы наводите курсор на какую-нибудь кнопку, а она после этого меняет цвет. Иногда для создания подобного эффекта применяется JavaScript, но обычно достаточно одного CSS, особенно после появления CSS третьей версии. Далее в статье я расскажу как менять картинку при наведении курсора мыши с помощью только одного CSS, рассмотрю несколько способов и различные эффекты.

Эффекты изменения элемента веб страницы при наведении курсора мыши часто называют hover-эффектами . Связано это с тем, что при реализации таких эффектов используется , который определяет стиль элемента при наведении на него курсора мыши.

Для начала рассмотрим вариант попроще. Допустим у Вас на страничке вставлена картинка, как приведено ниже:

И допустим вам необходимо менять ее отображение при наведении на нее курсора мыши. При вставке этого изображения к тегу img добвим атрибут class="animate1" , тогда html-код картинки будет выглядеть примерно так:

Для начала можно просто при наведении курсора сделать картинку прозрачной. За прозрачность в CSS отвечает свойство opacity , которое относится к CSS3. В качестве значения используются дробные числа от 0 до 1, где ноль соответствует полной прозрачности, а единица, наоборот, непрозрачности объекта. Для старых версий Internet Explorer придется использовать свойство filter со значением alpha(Opacity=X) , так как они не поддерживают свойство opacity . Вместо X надо будет подставить число от 0 до 100, где 0 означает полная прозрачность, а 100 — полная непрозрачность.

Тогда, чтобы сделать картинку прозрачной при наведении курсора в файл стилей, или между тегами и html-файла нужно добавить следующий css-код:

Nel caso in cui non hai familiarità con i CSS, lascia che ti spieghi che la voce img.animate1: hover dice al browser che per tutti gli elementi avendo un attributo di classe uguale a animate1 quando ci passi sopra con il cursore del mouse, applica stili specificati... Gli stili sono specificati tra parentesi graffe( e ). Se tutto è stato fatto correttamente, dovrebbe assomigliare a questo:

Puoi fare una foto in stato originale traslucido e renderlo opaco al passaggio del mouse. Quindi aggiungi le seguenti righe al file CSS:

img.animato1 (
filtro: alfa (Opacità = 25);
opacità: 0,25;
}
img.animate1: hover (

opacità: 1;
}

Il risultato sarà così:

Per un maggiore effetto, puoi rallentare i cambiamenti nella trasparenza dell'immagine. Per fare ciò, puoi utilizzare la proprietà di transizione CSS, che imposta l'effetto di transizione tra i due stati di un elemento. Aggiungiamo ad esempio un secondo di decelerazione. Quindi il nostro codice CSS diventerà così:

img.animato1 (
filtro: alfa (Opacità = 25);
opacità: 0,25;
-moz-transition: tutti 1s easy-in-out; / * effetto di transizione per Firefox fino alla versione 16.0 * /
-webkit-transition: tutti 1s easy-in-out; / * effetto di transizione per Chrome 26.0, Safari, Android e iOS * /
-o-transition: tutti 1s easy-in-out; / * effetto di transizione per Opera fino alla versione 12.10 * /
transizione: tutti 1s easy-in-out; / * effetto di transizione per altri browser * /
}
img.animate1: hover (
filtro: alfa (Opacità = 100);
opacità: 1;
}

Risultato:

attraverso trasformare le proprietà l'immagine può essere ridimensionata, ruotata, spostata, inclinata. Proviamo ad ingrandire l'immagine. Quindi il codice CSS sarà così:

img.animato1 (


- o-transizione: all 1s easy;
transizione: tutte le 1 facilità;
}
img.animate1: hover (
- trasformata moz: scala (1.5); / * effetto di trasformazione per Firefox fino alla versione 16.0 * /
- webkit-transform: scala (1.5); / * effetto di trasformazione per Chrome fino alla versione 26.0, Safari, Android e iOS * /
- o-trasformare: scala (1.5); / * effetto di trasformazione per Opera fino alla versione 12.10 * /
- trasformata ms: scala (1.5); / * effetto di trasformazione per IE 9.0 * /
trasforma: scala (1.5); / * effetto di trasformazione per altri browser * /
}

E il risultato sarà così:

È possibile aggiungere una rotazione all'ingrandimento dell'immagine. Poi stili CSS cambia un po':

img.animato1 (
- moz-transition: all 1s easy;
- webkit-transition: all 1s easy;
- o-transizione: all 1s easy;
transizione: tutte le 1 facilità;
}
img.animate1: hover (
- moz-transform: ruota (360 gradi) scala (1.5);
- webkit-transform: ruota (360 gradi) scala (1.5);
- o-transform: ruota (360deg) scala (1.5);
- ms-transform: ruota (360 gradi) scala (1.5);
trasforma: ruota (360 gradi) scala (1.5);
}

Risultato:

Sopra, abbiamo considerato i casi in cui un'immagine è coinvolta nell'animazione. Considera il prossimo modi per sostituire un'immagine con un'altra... In questo caso, di solito vengono preparate due immagini della stessa dimensione: una per vista originale, un altro per sostituirlo.

Diciamo che abbiamo due immagini, una è in bianco e nero e l'altra è a colori:

Facciamo in modo che quando passi con il mouse sopra immagine in bianco e nero visualizzato a colori. Per fare ciò, renderemo l'immagine originale lo sfondo dell'elemento div utilizzando la proprietà background. E quando passi sopra l'immagine con il cursore, cambieremo immagine di sfondo utilizzando la stessa pseudo-classe al passaggio del mouse e la stessa proprietà di sfondo. Per realizzare questo effetto su pagina html Inserisci elemento div con la classe ruotare1:

E aggiungi le seguenti descrizioni di stile:

div.rotate1 (
sfondo: url (img / 2.jpg); /* Percorso al file con il disegno originale * /
larghezza: 480px; / * Larghezza immagine * /
altezza: 360px; / * Altezza immagine * /
}
div.rotate1: hover (
sfondo: url (img/1.jpg); /* Percorso del file con l'immagine sostituita * /
}

E il risultato è:

Questo metodo ne ha uno svantaggio significativo... Poiché la seconda immagine viene caricata solo quando si passa sopra il cursore, se l'utente ha una connessione Internet lenta e la dimensione del file con l'immagine è grande taglia, l'immagine verrà visualizzata con una pausa. Pertanto, di seguito considereremo alcuni altri modi per sostituire le immagini al passaggio del mouse.

Il prossimo metodo si baserà sulla combinazione di due immagini in un unico file. Supponiamo di dover posizionare un pulsante sulla pagina, che, quando il cursore del mouse passa sopra di esso, cambierebbe la sua visualizzazione. Per fare ciò, combina due immagini in un unico file e l'immagine risultante avrà un aspetto simile a questo:

In questo caso, il passaggio da un motivo all'altro verrà effettuato spostando immagine di sfondo verticalmente utilizzando la proprietà background-position. Poiché quando si fa clic sul pulsante, di solito si verifica una transizione a un'altra pagina, quindi inseriremo l'immagine nell'elemento< a>... Quindi inserisci il seguente codice nella pagina html:

E nel file css in questo modo:

a.rotate2 (
sfondo: url (img / button.png); /* Percorso al file con il disegno originale * /
blocco di visualizzazione; / * Collega come elemento di blocco */
larghezza: 50px; / * Larghezza dell'immagine in pixel * /
altezza: 30px; / * Altezza immagine * /
}
a.rotate2: hover (
posizione di sfondo: 0 -30px; / * Sposta sfondo * /
}

Risultato:

E l'ultimo modo per oggi è quando un'immagine viene posizionata sotto un'altra usando la posizione: regola css assoluta. In questo caso, posizioniamo due immagini in un contenitore div:

E aggiungi stili CSS:

Anima2 (
posizione: relativa;
margine: 0 auto; / * set blocco div centro pagina * /
larghezza: 480px; /* Larghezza */
altezza: 360px; /* Altezza */
}
.animate2 img (
posizione: assoluta; / * posizionamento assoluto*/
sinistra: 0; / * allinea le immagini a sinistra angolo in alto div * /
in alto: 0; / * allinea le immagini in alto a sinistra angolo diviso */
}

Dopo aver aggiunto regole CSS, le immagini verranno posizionate una sotto l'altra. Ora controlla la trasparenza delle immagini con proprietà di opacità nello stato normale, mostreremo la seconda immagine e quando il cursore passa sopra la prima. Per fare ciò, nello stato normale, rendiamo l'immagine con la prima classe completamente trasparente e quando il cursore è in bilico, viceversa: l'immagine con la seconda classe sarà completamente trasparente e con la prima classe non trasparente:

Animate2 img.first (/ * la prima immagine è completamente trasparente * /
opacità: 0;
filtro: alfa (opacità = 0);
}
.animate2: hover img.first (/ * al passaggio del mouse, la prima immagine diventa opaca * /
opacità: 1;
filtro: alfa (opacità = 100);
}
/ * e il secondo diventa trasparente al passaggio del mouse * /
opacità: 0;
filtro: alfa (opacità = 0);
}

Risultato:

Puoi ottenere una transizione graduale aggiungendo una proprietà di transizione CSS all'ultima regola:

Animate2: hover img.second, .animate2 img.second: hover (
opacità: 0;
filtro: alfa (opacità = 0);
-moz-transition: facilita tutti i 2 secondi;
-webkit-transition: tutti i 2s facilitano;
-o-transizione: tutti i 2 si facilitano;
transizione: tutti i 2 secondi facilitano;
}

E il risultato è:

E se aggiungiamo la proprietà di trasformazione:

Animate2: hover img.second, .animate2 img.second: hover (
opacità: 0;
filtro: alfa (opacità = 0);
-moz-trasformata: scala (0, 1);
-webkit-transform: scala (0, 1);
-o-trasforma: scala (0, 1);
-trasformazione ms: scala (0, 1);
trasforma: scala (0, 1); / * riduce la larghezza dell'immagine a 0 * /
}

Risulta così:

Combinando vari CSS le proprietà possono essere raggiunte in diversi effetti al passaggio del mouse quando si cambiano le immagini durante il passaggio del mouse... Ho inserito questi e altri esempi in questa pagina, dove puoi anche scaricare i sorgenti. Questo è tutto, finché non ci incontreremo di nuovo.

Utilizzo e gestione degli stili con usando JavaScript consente di modificare l'aspetto di una cella "al volo", quando vengono soddisfatte determinate condizioni, come il passaggio del mouse su un collegamento o la cella stessa.

Consideriamo la tecnica più semplice: il colore di sfondo di una cella cambia quando il cursore del mouse passa su di essa.

Il passaggio del mouse sull'area viene monitorato dall'evento onMouseOver e il passaggio del mouse dall'area viene monitorato dall'evento onMouseOut. Poiché il colore di sfondo cambia per la stessa cella su cui passiamo il mouse, la modifica dello stile viene eseguita utilizzando il metodo this.style.background.

L'esempio usa il cambiamento grigio sfondo arancione Questo metodo non funziona nel browser Netscape 4.x.

Puoi anche effettuare una transizione a un altro documento quando fai clic non sul collegamento stesso, ma su una cella di tabella. Quindi l'intera cella si trasformerà in un collegamento e non solo il testo al suo interno. Va notato che questo approccio non è il migliore, a causa della sua non ovvietà, i visitatori del sito Web sono abituati al fatto che quando passano il mouse su un collegamento, il cursore del mouse si trasforma in una mano. Usando i CSS, puoi sovrascrivere l'aspetto del cursore del mouse, ma questa funzione è disponibile solo per il browser Internet Explorer.

Per cambiare il colore di una cella solo quando passi con il mouse su un collegamento al suo interno, dovresti fare riferimento alle proprietà della cella attraverso il suo nome. In modo che il programma sappia quali proprietà della cella modificare, viene utilizzato ID parametro che identifica in modo univoco l'oggetto.

Per comodità, la modifica del colore di una cella è progettata come funzioni separate. Dovuto a Browser Internet Utilizzo di Explorer, Netscape e Opera approcci diversi per cambiare dinamicamente lo stile di un elemento, nelle funzioni mostrate nell'esempio 3, il colore di sfondo viene cambiato in due modi. Ogni browser sceglierà per sé la riga appropriata e il resto verrà ignorato.