Pseudo-Element-Steuerelement mit Javascript

Question

Ich versuche, eine Talkbubble formatieren div-Box Farben beim Anklicken vollständig zu ändern.

Ich lief in ein Problem des Erhaltens das :before Pseudo-Elements, das ich verwende (den Pfeil für die talkbubble zu formen), um tatsächlich Farben mit dem Rest des Elements zu ändern, wie hier zu sehen:

HTML

<div class="clickables"> 
     <div class="talkbubble"> 
      <input type="hidden" class="tbselector" value="sbselection_1"> 
      <div class="thumbnail"> 
       <img src="images/thumbnail1.png" height="33" width="30" /> 
      </div> 
      <div class="words">Commons</div> 
     </div> 
     <div class="talkbubble"> 
      <input type="hidden" class="tbselector" value="sbselection_2"> 
      <div class="thumbnail"> 
       <img src="images/thumbnail1.png" height="33" width="30" align="middle" /> 
      </div> 
      <div class="words">crossroads</div> 
     </div> 
     . 
     . More and more 
     . 
    </div> 
</div> 

CSS^{Nur Relevante}

.talkbubble { 
    background: white; 
    color: rgb(0,0,0); 
    height: 40px; 
    margin-top: 1%; 
    margin-left: 48%; 
    margin-right: auto; 
    position: relative; 
    width: 150px;  
} 
.talkbubble:before { 
    border-top: 10px solid transparent; 
    border-right: 10px solid white; 
    border-bottom: 10px solid transparent; 
    content:""; 
    height: 0; 
    position: absolute; 
    right: 100%; 
    top: 10px; 
    width: 0;  
} 
.talkbubble:before.clicked { 
    border-right-color:#666666; 
} 
.talkbubble:hover{ 
    background-color: rgb(194,194,194)!important; 
    color:rgb(255,255,255); 
} 
.talkbubble:hover:before{ 
    border-right-color: rgb(194,194,194)!important; 
} 

JQUERY

$('.clickables').on('click','.talkbubble',function() { 
    $(this).parent().find('.talkbubble').css('background-color','#ffffff'); 
    $(this).css('background-color', '#666666'); 
}); 

Hier ist eine Demo http://jsfiddle.net/petiteco24601/3xuuq2fx/

ich tat etwas Forschung und es scheint ein wenig unschlüssig. In den meisten Fällen, was ich gefunden habe, war im Grunde gesagt, dass es keine Möglichkeit gibt, JavaScript wirklich auf ein Pseudo-Element zu zwingen, da das Pseudo-Element NICHT WIRKLICH existiert.

Jedoch, mit mehr Forschung, fand ich Dinge wie http://css-tricks.com/pseudo-element-animationstransitions-bug-fixed-in-webkit/ und Change an HTML5 input's placeholder color with CSS, die sagen, dass diese Fehler behoben wurden und es ist mit einigen Browsern möglich, JavaScript auf Pseudo-Elemente zu verwenden. Was ist das eigentliche Geschäft? Wie weit kann eine Person Pseudoelemente kontrollieren?

Answer 1

Sie können eine neue Klasse hinzufügen oder entfernen.

• zuerst die !important Erklärung auf Ihrem CSS entfernen ist eine schlechte Praxis und kann später gegensätzlich sein.

• Dann eine neue Klasse mit dem Wechsel machen Sie wollen:

  .clicked { 
      background:#666; 
  } 
  .clicked:before { 
      border-right-color:#666; 
  } 
  

• Dann mit JQuery hinzufügen/entfernen die Klasse:

  $('.clickables').on('click','.talkbubble',function() { 
      $(this).siblings('.talkbubble').removeClass('clicked'); 
      $(this).addClass('clicked'); 
  }); 
  

prüfen diese DemoFiddle

Answer 2

Die einzige Möglichkeit, Pseudo-CSS-Deklarationen zu ändern, ist war es, individuelle <style> Tags mit und id mit der Klasse der Elemente zu verbinden, auf die sie angewendet werden. I.E.

<style id="talkbubble_style"> 
    .talkbubble:before{ 
    border-right-color:#666666; 
    } 
</style> 

Also, wenn Sie das Klick-Ereignis behandeln, erhalten Sie den Stil und ändern Sie den innerHTML, was auch immer CSS Sie wollen, zusammen mit der !important Option zu jeder Definition hinzugefügt. Gefällt mir:

$('.clickables').on('click','.talkbubble',function() { 
    $(this).parent().find('.talkbubble').css('background-color','#ffffff'); 
    $(this).css('background-color', '#666666'); 
    $('#talkbubble_style').html('.talkbubble:before{border-right-color:#666666!important;}'); 
}); 

Answer 3

Wenn Sie nur nach CSS-Lösung suchen, ohne JavaScript zu verwenden.Hier ist sie:

Working Fiddle

ich jeden list-item Satz mit einem Label und Radio-Button in HTML-Code eingewickelt. und in CSS, habe ich den folgenden Code:

.talkbubble { 
    display: inline-block; 
    /* other styles */ 
} 

:checked + .talkbubble { 
    background-color: #666; 
} 
:checked + .talkbubble:before { 
    border-right-color: #666; 
} 
:checked + .talkbubble:hover:before { 
    border-right-color: #666; 
} 
.clickables input[type="radio"] { 
    position: absolute; 
    visibility: hidden; 
    pointer-events: none; 
} 

..und auch !important entfernt, wie durch Danko vorgeschlagen.