Question

我正在尝试使 talkbubble 样式的divbox在点击后完全改变颜色。

我遇到了一个问题，即获取我正在使用的:before伪元素（塑造talkbubble的箭头）以实际改变颜色与元素的其余部分，如下所示：

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

Answer 2

如果您只是在寻找不使用javascript的CSS解决方案。这是：

<强> Working Fiddle

我用HTML代码中的标签和单选按钮包装每个列表项块。在CSS中，我添加了以下代码：

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

..并按照Danko的建议删除!important。

Answer 3

我能够更改伪CSS声明的唯一方法是创建单独的<style>标记，其id和id与应用它们的元素类相关联。即。

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

因此，当您处理click事件时，您将获得样式元素并将innerHTML更改为您想要的任何CSS，以及添加到每个定义的!important选项。像这样：

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

用javascript进行伪元素控制

3 个答案: