Oggi impareremo a fare cambiamento di colore del blocco regolare con css e jquery. Con questo plugin, puoi ottenere risultati di design sorprendentemente belli. Ad esempio, puoi creare un menu interessante che cambierà colore senza problemi al passaggio del mouse e, credimi, sembra molto carino.

jQuery

Per iniziare tra i tag e devi mettere quanto segue:

Poi di nuovo tra i tag e copia questo script:

Dove .scatola- questa è la classe di blocco che abbiamo creato sopra in CSS.

"#FF4500» - colore al passaggio del mouse. 400 - Velocità di animazione al passaggio del mouse.

"#ffffff"— colore iniziale dopo la rimozione del cursore. 400 - velocità di animazione quando il cursore viene rimosso.

HTML

Dopo aver eseguito tutto come descritto sopra, il colore del blocco cambierà senza intoppi. Per inserire un tale blocco nella pagina, devi solo aggiungere quanto segue nel posto giusto:

E apparirà il blocco.

Importante

Questo plugin può cambiare solo il colore di sfondo (sfondo). Ad esempio, non sarà possibile allegarlo ai link o al testo. Il colore dei link è cambiato da un altro plugin (scriverò sicuramente come farlo a breve).

Se vuoi fare in modo che i blocchi sulla pagina abbiano colori diversi, come ho in , avrai bisogno tra i tag e metti diversi script di seguito e, di conseguenza, non dimenticare di cambiare il colore con quello desiderato. La cosa più importante è cambiare la classe, ad esempio, nel nostro esempio sopra: la classe Scatola e lo script seguente dovrebbe essere con una classe diversa, come Casella 1, poi Casella 2 e così via.

Questo è tutto, cari amici. Se non capisci qualcosa, assicurati di chiedere nei commenti. A presto.

C'è un livello con testo e un pulsante, quando si fa clic, è necessario cambiare il colore del testo per questo livello.

Per modificare le proprietà in modo dinamico, jQuery utilizza la funzione animate. Ti consente di impostare un nuovo valore -proprietà e tempo, durante il quale ci sarà un cambiamento animato graduale dal vecchio valore a quello dato. Una caratteristica molto potente! Ma, come al solito, c'è anche una mosca nell'unguento.

Problema

L'insieme di proprietà CSS con cui funziona l'animazione è limitato. In realtà, queste sono solo quelle proprietà che possono assumere valori numerici. In particolare, l'animazione non può funzionare con il colore.

Soluzione

Fortunatamente, esiste un plug-in che estende le capacità di animazione e lo rende ancora più potente. Per favore, ama e rispetta jQuery.color! Con esso, puoi aggiungere e all'elenco di comprensibili proprietà CSS animate.

In pratica si presenta così:

Verificato in:

• IE 6-8
• Firefox 3
• Opera 9.5-10
• Safari 3

Cosa scaricare?

• jquery.js (55,9 Kb) - libreria jQuery versione 1.3.2;
• (3,66 Kb).

Inizio veloce

Collega jQuery e plugin:

Impostiamo esplicitamente il colore iniziale in CSS:

Div( colore di sfondo:#0CF; )

Ora usiamo la funzione animate, ad esempio, quando passiamo con il mouse:

E ora in modo più dettagliato

Il plugin ti permette di lavorare con le seguenti proprietà CSS:

Esempio:

Un vantaggio:

• l'utilizzo di una classe fornisce un meccanismo più flessibile rispetto alla semplice funzione animate. Dopotutto, qui non siamo limitati nella scelta di modificare simultaneamente le proprietà.

Meno:

• metodo piuttosto "pesante" - le librerie pesano decentemente.

Conclusioni:

Se hai bisogno di effetti più complessi rispetto all'animazione "pull", puoi usare l'effetto switchClass dal set dell'interfaccia utente. Ma se l'attività è limitata a un cambio di colore uniforme, utilizzare il plug-in jQuery.color più leggero.

jQuery.color rende la mia funzione di animazione preferita ancora migliore. Mi è piaciuto molto il fatto che non aggiunga classi o ID extra. Espande solo le molte opzioni possibili per l'animazione. Usalo tutto per creare un bellissimo effetto di cambio colore uniforme!

C'è un modo per selezionare/manipolare pseudo-elementi CSS come::before e::after (e vecchia versione con un punto e virgola) usando jQuery?

Ad esempio, il mio foglio di stile ha la seguente regola:

Intervallo::dopo( contenuto:"pippo" )

Come posso cambiare "foo" in "bar" con jQuery?

Puoi anche passare il contenuto dello pseudo elemento all'attributo data e quindi utilizzare jQuery per manipolarlo:

pippo

$("span").hover(function()( $(this).attr("data-content","bar"); ));

Span:after ( content: attr(data-content) " qualsiasi altro testo tu voglia"; )

Se vuoi che "altro testo" non venga visualizzato, puoi combinarlo con la soluzione di seucolega in questo modo:

pippo

$("span").hover(function()( $(this).addClass("change").attr("data-content","bar"); ));

Span.change:after ( content: attr(data-content) " qualsiasi altro testo tu voglia"; )

Questo non è pratico perché non l'ho scritto per l'uso nel mondo reale, solo per darti un esempio di ciò che può essere ottenuto.

Css = ( prima: function(elem,attr)( if($("#cust_style") !== undefined)( $("body").append(""); ) else ( $("#cust_style").remove(); $("body").append(""); ) ), dopo: function(elem,attr)( if($("#cust_style") !== undefined)( $("body").append(""); ) else ( $("#cust_style").remove(); $("body").append(""); } } }

questa aggiunta attualmente aggiunge un elemento o aggiunge un elemento Style che contiene l'attributo richiesto che influirà sull'elemento di destinazione dopo l'elemento Pseudo.

questo può essere usato come

Css.after("someElement"," content: "Test"; position: "absolute"; ") // modifica / aggiunta di stili a:after

css.prima(...); // per modificare lo pseudo elemento prima.

sia dopo: che prima: gli pseudo-elementi non sono direttamente accessibili tramite il DOM, al momento non è possibile modificare liberamente determinati valori css.

il mio percorso era solo un esempio e non va bene per la pratica, puoi cambiarlo, provare alcuni dei tuoi trucchi e renderlo adatto all'uso nel mondo reale.

Quindi fai i tuoi esperimenti con questo e altri!

accoglie - Adarsh ​​Hedde.

Grazie a tutti! sono riuscito a fare quello che volevo :D http://jsfiddle.net/Tfc9j/42/ guarda qui

volevo che l'opacità del div esterno fosse diversa dall'opacità del div interno e questa modifica facendo clic da qualche altra parte ;) Grazie!

$("#ena").on("click", function() ( $("head").append(""); )); $("#duop").on("click", funzione (e) ( $("head").append(""); e.stopPropagation(); )); #ena( width:300px; height:300px; border:1px nero solido; position:relative; ) #duo( opacity:1; position:absolute; top:50px; width :300px; height:100px; background-color:white; ) #ena:before ( content: attr(data-before); color: white; cursor: pointer; position: absolute; background-color:red; opacity:0.9; larghezza: 100%; altezza: 100%; )

Puoi creare una proprietà falsa o usarne una esistente ed ereditarla nel foglio di stile dello pseudo-elemento.

var commutato = falso; // Abilita il cambio colore setInterval(function() ( var color = commutato ? "red" : "darkred"; var element = document.getElementById("arrow"); element.style.backgroundColor = color; //Gestione dello pseudoelemento "s css // utilizzo dell'ereditarietà. element.style.borderLeftColor = color; commutato = !commutato; ), 1000); .arrow ( /* IMPOSTA PROPRIETA' FICTIONAL */ border-left-color:red; background-color:red; larghezza: 1 em; altezza: 1 em; display: blocco in linea; posizione: relativa; ) .freccia: dopo ( bordo superiore: 1 em trasparente solido; bordo destro: 1 em trasparente trasparente; bordo inferiore: 1 em trasparente trasparente; bordo- sinistra:1em trasparente solido; /* INHERIT PROPERTY */ bordo-sinistra-colore:ereditare; contenuto:""; larghezza:0; altezza:0; posizione:assoluta; sinistra:100%; alto:-50%; )

Non sembra funzionare per la proprietà content :(

Non puoi selezionare pseudo elementi in jQuery perché non fanno parte del DOM. Ma puoi aggiungere una classe specifica all'elemento genitore e controllare i suoi pseudo-elementi in CSS.

Span.change:after ( contenuto: "bar" )

Sebbene siano resi dai browser tramite CSS come se fossero simili ad altri reali elementi DOM, gli stessi pseudo-elementi non fanno parte del DOM, perché gli pseudo-elementi, come suggerisce il nome, non sono elementi reali, e quindi non puoi selezionarli e manipolarli direttamente con jQuery (o qualunque API JavaScript, se non proprio Selettori API). Questo vale per tutti gli pseudo-elementi che si tenta di modellare con lo script, non solo ::before e ::after .

Puoi ottenere stili di pseudo-elementi solo direttamente in fase di runtime tramite CSSOM (think window.getComputedStyle() ), che non è esposto a jQuery al di fuori di .css() , un metodo che non supporta nemmeno pseudo-elementi.

Puoi sempre trovare altri modi per aggirarlo, ad esempio:

uno funzionante, ma non molto metodo efficace- aggiungi una regola al documento con un nuovo contenuto e fai riferimento ad esso con una classe. a seconda di ciò che è necessario, la classe potrebbe richiedere un identificatore univoco per ogni valore nel contenuto.

$("").appendTo($("head")); $("span").addClass("id-after");

Ho già risposto a questa domanda, ma solo per essere super cool, te lo ripeto.

La risposta deve essere Sì e Non. Non puoi selezionare un elemento con uno pseudo-selettore, ma puoi aggiungere una nuova regola al foglio di stile con javascript.

Ho fatto qualcosa che dovrebbe funzionare per te:

Var addRule = function(sheet, selector, styles) ( if (sheet.insertRule) return sheet.insertRule(selector + " (" + stili + ")", sheet.cssRules.length); if (sheet.addRule) restituisce il foglio .addRule(selettore, stili); ); addRule(document.styleSheets, "body:after", "content: "foo"");

Lo stile calcolato in "prima" era contenuto: "VERIFICA DA GUARDARE";

Ecco le mie due righe di jQuery che utilizzano l'idea di aggiungere una classe extra che faccia riferimento in modo specifico a quell'elemento e quindi aggiungere un tag di stile (con un tag importante) da modificare Valori CSS contenuto dell'elemento sudo:

$("span.play:eq(0)").addClass("G");

$("corpo").append("");

Perché aggiungere classi o attributi quando puoi semplicemente aggiungere stile alla testa

$("testa").append("")

Ci sono molte risposte qui, ma nessuna risposta aiuta a manipolare css:before o :after , nemmeno quella accettata.

Ecco come suggerisco di farlo. Supponiamo che il tuo HTML sia simile a questo:

E poi lo imposti: prima in CSS e progettalo in questo modo:

#qualcosa:prima( contenuto:"1st"; font-size:20px; colore:rosso; ) #qualcosa( contenuto:"1st"; )

Nota che ho anche impostato il contenuto sull'elemento stesso in modo da poterlo eliminare facilmente in seguito. Ora c'è un clic del pulsante su cui vuoi cambiare il colore in verde e la dimensione del carattere in 30px. Puoi ottenere questo in questo modo:

Definisci CSS con lo stile richiesto in alcune classi .activeS:

ActiveS:before( color:green !important; font-size:30px !important; )

Ora puoi cambiare lo stile :before aggiungendo una classe al tuo elemento :before in questo modo:

modificare

Se vuoi ottenere contenuti: prima può essere fatto come:

Ottieni contenuti

In definitiva, se vuoi cambiare dinamicamente il contenuto di :before con jQuery, puoi ottenerlo in questo modo:

modificare

Facendo clic sul pulsante "cambia prima" cambierà il contenuto :prima di #qualcosa in "22", che è un valore dinamico.

Spero che sia di aiuto

Ecco il modo per accedere alle proprietà di stile :after e :before definite in css:

// Ottieni il valore del colore di .element:before var color = window.getComputedStyle(document.querySelector(".element"), ":before").getPropertyValue("color"); // Ottieni il valore del contenuto di .element:before var content = window.getComputedStyle(document.querySelector(".element"), ":before").getPropertyValue("content");

$(".span").attr("data-txt", "pippo"); $(".span").click(function() ( $(this).attr("data-txt","qualsiasi altro testo"); )) .span( ) .span:after( content: attr(data -testo); )

Possiamo anche fare affidamento proprietà CSS personalizzate (variabili) per manipolare lo pseudo elemento. Possiamo leggere specifiche, che cosa:

Le proprietà personalizzate sono proprietà normali, quindi possono essere dichiarate su qualsiasi elemento, consentite con l'ereditarietà normale e regole a cascata, possono essere condizionate su @media e altre regole condizionali, possono essere utilizzate in un attributo di stile HTML, possono essere lette o impostate utilizzando CSSOM, ecc. d.

Con questo in mente, l'idea è quella di definire una proprietà personalizzata all'interno dell'elemento e lo pseudo elemento eredita semplicemente da esso; quindi possiamo cambiarlo facilmente:

1) Utilizzo dello stile in linea:

Box:before ( contenuto:"Sono un elemento prima"; color:var(--color, red); font-size:25px; )

2) Utilizzo di CSS e Classi

Box:before ( contenuto:"Sono un elemento prima"; color:var(--color, red); font-size:25px; ) .blue ( --color:blue; ) .black ( --color:black ; )

3) Utilizzo di javascript

document.querySelectorAll(".box").style.setProperty("--color", "blue"); document.querySelectorAll(".box").style.setProperty("--color", "#f0f"); .box:before ( content:"Sono un elemento prima"; color:var(--color, red); font-size:25px; )

4) Utilizzo di jQuery

$(".box").eq(0).css("--color", "blue"); /* la funzione css() con proprietà personalizzate funziona solo con una versione jQuery >= 3.x con una versione precedente possiamo usare l'attributo style per impostare il valore. Fai semplicemente attenzione se hai già definito lo stile in linea! */ $(".box").eq(1).attr("style","--color:#f0f"); .box:before ( content:"Sono un elemento prima"; color:var(--color, red); font-size:25px; )

Può essere utilizzato anche con valori complessi:

Box ( --c:"content"; --b:linear-gradient(red,blue); --s:20px; --p:0 15px; ) .box:before ( content: var(--c) ; background:var(--b); color:#fff; font-size: calc(2 * var(--s) + 5px); padding:var(--p); )

SE vuoi controllare completamente gli elementi ::before o ::after con sudo tramite CSS, puoi farlo con JS. Vedi sotto:

jQuery("head").append("");

Si prega di notare che l'elemento