So ändern Sie die Farbe des pseudo-Elemente in CSS über JQuery?

Ich habe eine herzförmige button mit CSS. Hier ist das JSFiddle link von meinem code.

CSS:

#heart {
  height: 50px;
  width: 50px;
  position: relative;
}
#heart .outline:before,
#heart .outline:after {
  position: absolute;
  content: "";
  left: 28px;
  top: 1px;
  width: 15px;
  height: 27px;
  background: #d53423;
  -moz-border-radius: 50px 50px 0 0;
  border-radius: 85px 60px 0 0;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transform-origin: 0 100%;
  -moz-transform-origin: 0 100%;
  -ms-transform-origin: 0 100%;
  -o-transform-origin: 0 100%;
  transform-origin: 0 100%;
}
#heart .outline:after {
  left: 13px;
  -webkit-transform: rotate(45deg);
  border-radius: 45px 60px 0 0;
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transform-origin: 100% 100%;
  -moz-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  -o-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
}
$("#heart").on('submit',
function(e) {
  console.log('click heart support');
  e.preventDefault();
  $('#heart .outline:before').css('background', 'grey');
}
);

HTML:

<form id="heart">
  <button id="like_btn" class="outline" type="submit"></button>
</form>

Wenn ich auf die Formular-Schaltfläche, möchte ich diese herzförmige Taste, um die Farbe ändern. Jedoch, diese Herz-förmige Taste ist aus CSS pseudo-Elementen und daher kann ich nicht einfach die Farbe ändern.

Hat jemand eine Ahnung, wie kann ich manipulieren, CSS pseudo-Elementen (z.B. :before und :after) mithilfe von JQuery?

InformationsquelleAutor user824624 | 2013-04-29
  1. 18

    Ich :before :after Hintergrundfarbe Erben, dann ändern Sie die Hintergrundfarbe Ihrer Eltern. http://jsfiddle.net/npMyy/3/

    .outline {
    background: red;
}
#heart .outline:before, #heart .outline:after {
    background: inherit;
}
    • Danke, Peiwen, das ist, was ich brauche
    • gute sol ' N ' @Peiwen
    • Plus 1 upvote für diese tolle Antwort!
    InformationsquelleAutor Peiwen
  2. 4

    Diese scheint zu funktionieren bei mir (Firefox 20)... nicht getestet irgendetwas anderes.. 

    #heart .outline:active:before,
#heart .outline:active:after {
    background: #000;
}

    Hier :active ist eine pseudo-Klasse, und :before und :after werden pseudo-Elemente. So ist dies vollkommen akzeptabel, nach der standard.

    Pseudo-Klassen sind erlaubt überall in Selektoren, während pseudo-Elemente dürfen nur angehängt werden, nach der letzten einfachen Selektor der Selektor.

    • Der css-Teil ganz offensichtlich funktioniert, ist das problem der Fragesteller, ist die Veränderung der Farbe NACH, mit jQuery... was nicht funktioniert... 🙂
    • In diesem Fall geben Sie die element einer anderen Klasse mit Hilfe von jQuery onlick - dann style es anders... ich werde versuchen und machen ein jsfiddle...
    • jsfiddle.net/npMyy/2
    • Danke, FDL, dieser funktioniert auch gut
    InformationsquelleAutor naththedeveloper
  3. 0

    Anderen sol 'N die änderung Ihrer form s-Klasse auf "Absenden" und soll das Herz des Kindes :before und :after mit der modifizierten Auswahlfunktion. Obwohl ich WIRKLICH wie N A T H ' s Antwort mit :active. sxy. Machte nur minimale änderungen an Ihrer vorhandenen code.

    DEMO

    jquery

    $("#heart:not(.submitted)").on('submit',function(e){
    console.log('click heart support');     
    e.preventDefault();
    $('#heart').addClass('submitted');
});

    css

    //... removed lines 

#heart.submitted .outline:before,
#heart.submitted .outline:after{
    background: grey;
}

    html

    <form id="heart" >
    <button id="like_btn" class="outline" type="submit" ></button>
</form>
    InformationsquelleAutor Todd
Schreibe einen Kommentar