css pas 'enlever' sur la couleur du texte mis à transparent

Question

J'essaye de après que le DOM soit chargé changer un texte à l'intérieur d'un h1 pour changer sa couleur à transparent, l'effet de flou fonctionne mais pas l'effet de couleur.

Voici les parties de mon code:

<script type="text/javascript"> 
 
    $(document).ready(function() { 
 
     $('#maintext h1').addClass('blur-text'); 
 
    }); 
 
</script>

#main h1 
 
    font-family: Neucha 
 
    font-size: 14em 
 
    color: $sbbqyellow 
 
    margin-top: 35vh 
 
    -webkit-transform: rotate(-10deg) skew(-10deg, 0) 
 
    -moz-transform: rotate(-10deg) skew(-10deg, 0) 
 
    -ms-transform: rotate(-10deg) skew(-10deg, 0) 
 
    -o-transform: rotate(-10deg) skew(-10deg, 0) 
 
    transform: rotate(-10deg) skew(-10deg, 0) 
 

 
.blur-text 
 
    color: transparent 
 
    text-shadow: 0 0 64px rgba(243, 203, 74, 1)

<div id="main"> 
 
    <div id="maintext" class="center"> 
 
     <h1>Sundsvall BBQ</h1> 
 
    </div> 
 
    <div id="footer" class="center"> 
 
     <h3>Norrlands största grillevent</h3> 
 
    </div> 
 
</div>

Answer 1

Votre #main h1 règle css a une higher specificity que votre règle .blur-text, de sorte que les anciens overrides ce dernier.

Juste faire de sorte que votre règle .blur texte a une spécifité plus

#maintext h1.blur-text { 
    color:transparent; 
} 

Demo

$(document).ready(function() { 
 
    $('#maintext h1').addClass('blur-text'); 
 
});

#main h1 { 
 
    font-family: Neucha; 
 
    font-size: 14em; 
 
    color: yellow; 
 
    margin-top: 35vh; 
 
    -webkit-transform: rotate(-10deg) skew(-10deg, 0); 
 
    -moz-transform: rotate(-10deg) skew(-10deg, 0); 
 
    -ms-transform: rotate(-10deg) skew(-10deg, 0); 
 
    -o-transform: rotate(-10deg) skew(-10deg, 0); 
 
    transform: rotate(-10deg) skew(-10deg, 0); 
 
} 
 

 
#maintext h1.blur-text { 
 
    color: transparent; 
 
    text-shadow: 0 0 64px rgba(243, 203, 74, 1); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="main"> 
 
    <div id="maintext" class="center"> 
 
    <h1>Sundsvall BBQ</h1> 
 
    </div> 
 
    <div id="footer" class="center"> 
 
    <h3>Norrlands största grillevent</h3> 
 
    </div> 
 
</div>

Answer 2

Vos sélecteurs CSS varient en spécificité. '#main h1' où vous définissez 'color: $ sbbqyellow' deviendra '.blur-text'. Si vous regardez dans votre inspecteur d'outils de développement, vous verrez probablement les deux styles appliqués, mais dans le mauvais ordre en cascade.

Pour que votre code fonctionne exactement comme prévu, changez '.blur-text' en '#main h1.blur-text'. Cependant, je recommanderais de ne pas essayer d'utiliser des ID ou des éléments, mais plutôt des classes uniques pour mieux contrôler la spécificité, en particulier sur les choses qui basculent comme ça.