javascript - javascript伪元素控制

Question

我试图让一个talkbubble 风格的 div-box 在被点击时完全改变颜色。

我遇到了一个问题，就是让我正在使用的 :before 伪元素(为谈话气泡塑造箭头形状)来实际改变其他元素的颜色元素的，如下所示:

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 ^只是相关

.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');
 });

这是一个演示 http://jsfiddle.net/petiteco24601/3xuuq2fx/

我做了一些研究，似乎没有定论。在大多数情况下，我发现的很多内容基本上都是在说没有办法真正在伪元素上强制使用 javascript，因为伪元素并不真正存在。

然而，通过更多的研究，我发现了类似 http://css-tricks.com/pseudo-element-animationstransitions-bug-fixed-in-webkit/ 的东西和 Change an HTML5 input's placeholder color with CSS也就是说，这些错误已修复，并且某些浏览器可以在伪元素上使用 javascript。实际情况如何？一个人能控制伪元素到什么程度？

Answer 1

您可以采取的方式是添加或删除新类。

• 首先删除 CSS 上的 !important 声明是不好的做法，以后可能会产生冲突。

• 然后根据您的需要创建一个新类:

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

• 然后使用 Jquery 添加/删除类:

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

检查这个DemoFiddle