Como posso trocar o estilo da uma classe :after utilizando jquery?
tentei assim mas não deu certo:
HTML:
<div class="box"></div>
Jquery:
$('.box:after').css({
borderColor:' #c12 transparent transparent transparent'
});
Como posso trocar o estilo da uma classe :after utilizando jquery?
tentei assim mas não deu certo:
HTML:
<div class="box"></div>
Jquery:
$('.box:after').css({
borderColor:' #c12 transparent transparent transparent'
});
pseudo-elementos (::after
, ::before
etc.) não estão na árvore do DOM, portanto não estão acessíveis via JavaScript.
Esses elementos só são visíveis na tela, mas não estão na árvore de elementos do DOM, conforme dito. Caso queira alterá-los, terá que adicionar uma classe específica.
Exemplo:
$("#b1").click(function(){
$(".box").addClass("novaclasse");
});
$("#b2").click(function(){
$(".box").removeClass("novaclasse");
});
.box:after{
content: 'after';
border: 10px solid #000;
border-color: #000 transparent transparent transparent;
}
/* classe que irá alterar o :after */
.box.novaclasse:after{
border-color: #c12 transparent transparent transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
principal
</div>
<br>
<input id="b1" type="button" value="Clique para alterar">
<br>
<em>Irá adicionar a classe .novaclasse</em>
<br><br>
<input id="b2" type="button" value="Clique para voltar original">
<br>
<em>Irá remover a classe .novaclasse</em>