0
votes

CSS: après ne pas travailler lorsque l'élément créé par JQuery

Je suis confus sur la raison pour laquelle le CSS ne fonctionne pas sur ce HTML: xxx pré>

javascript: p> xxx pré>

et mon CSS est: P>

.disabledagent {
  position: relative; 
  margin-bottom:15px;
}
.disabledagent::after { 
  content: "";
  opacity: 0.5;
  position:absolute; 
}

.disabled-agent-label {
  z-index: 10;
  position: absolute;
  height: 100%;
  width: 100%;
  text-align: center;
  padding-top: 30%;
}

jquery html css

6 commentaires

Vous n'ajoutez aucun contenu à la DOM, créant uniquement une chaîne HTML ..? Même si vous avez ajouté la chaîne, le : après pseudo élément n'a pas de contenu, il n'y a donc rien à montrer à 0.5 opacité de toute façon ...


                                        
                                                                            Vous appliquez simplement une opacité à un élément vide positionné .. vous ne verrez rien
                                        
                                                                            @RoryMCcrossan désolé j'ai ajouté JQuery ANNEZ TOUJOURS
                                        
                                                                            J'ai ajouté une réponse pour vous ci-dessous. Vous devez réellement placer du contenu dans le : après 

                                        
                                                                            @RORYMCCROSAN Je veux toute la Div dont la classe Nom = nom-agent à désactiver Je veux dire Opacité 0.5 et désactivé Devrait avoir opacité 1 (Clas = Agent-Agent-label)]
                                        
                                                                            Si vous voulez: après sans contenu, spécifiez la hauteur et la largeur.



                                    
                    3 Réponses :
                    
                                            
                            
                                
                                    2
 votes
                                
                            
                            
                                
                                     Il y a deux problèmes ici. Tout d'abord, vous créez une chaîne HTML mais ne faites rien avec elle; Vous devez l'ajouter à la DOM, probablement en l'ajoutant à celui-ci à  .append  code>. 
 Deuxièmement, le : après  code> pseudo que vous créez n'a pas de contenu, donc rien n'apparaît être fané. Vous devez définir le contenu   code> pour être affiché dans l'élément, quelque chose comme ceci:  p> 
  p> 


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="append"></div>
<button type="submit">Append...</button>

                                

                                                                    
                                    
                                    
                                        0 commentaires
                                        
                                                                                    
                                    
                                                            
                        
                        
                                            
                            
                                
                                    1
 votes
                                
                            
                            
                                
                                     Vous pouvez essayer quelque chose comme celui-ci 
  p> 


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="append"></div>
<button type="submit">Append...</button>

                                

                                                                    
                                    
                                    
                                        2 commentaires
                                        
                                                                                            
                                                    @ Chill007 vous codez travailler pour la couleur de fond, mais il a encore une opacité 1                                                
                                                
                                                                                            
                                                    Non, vous pouvez vérifier en inspectant qu'il montre une opacité 0,5 pour la couleur de fond                                                
                                                
                                                                                    
                                    
                                                            
                        
                        
                                            
                            
                                
                                    -1
 votes
                                
                            
                            
                                
                                     Je résolvai mon problème en ajoutant du code comme ci-dessous et merci d'aide @RoryMCcrossan et @ chill007 
 .disabledagent {
   position: relative; 
   margin-bottom:15px;
 }
 .disabledagent::after {
   content: "";
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   background-color: rgba(213, 218, 222, 0.75);
 }     

 .disabled-agent-label {

     z-index: 10;
     position: absolute;
     height: 100%;
     width: 100%;
     text-align: center;
     padding-top: 30%;
 }

                                

                                                                    
                                    
                                    
                                        0 commentaires