Theme Customizer nicht live Vorschau Änderungen an Pseudo-Elementen

Ich habe in letzter Zeit mit der Theme-Customizer-API gearbeitet und festgestellt, dass Pseudoelemente nicht live aktualisiert werden, wenn die Vorschau verwendet wird. In meinem Projekt habe ich ein Bild mit einem transparenten Overlay mit Pseudoelementen.

.hero-section:before { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; background: #000000; opacity: 0.5; } 

Während dies nicht funktioniert Update:

  // Update targeting a pseudo element. wp.customize( 'image_color', function( value ) { value.bind( function( newval ) { $('.hero-section:before').css('background', newval ); } ); } ); 

Dies wird live aktualisiert:

  // Update targeting a class. wp.customize( 'image_color', function( value ) { value.bind( function( newval ) { $('.hero-section').css('background', newval ); } ); } ); 

Alle Einstellungen werden mit postMessage .

  $wp_customize->add_setting('image_color', array( 'default' => '#000000', 'transport' => 'postMessage', ) ); $wp_customize->get_setting( 'image_color' )->transport = 'postMessage'; 

Wenn ich Änderungen speichere (refresh) funktioniert alles einwandfrei, die Farbe wird aktualisiert. Wie kann es sein, dass Pseudoelemente beim Live-Update nicht funktionieren?

Solutions Collecting From Web of "Theme Customizer nicht live Vorschau Änderungen an Pseudo-Elementen"