pseudo element control with javascript

Vote count:

1

In trying to make a "talkbubble" styled div- box change colors completely upon being clicked, I ran into a problem of getting the :before pseudo element that I'm using (to shape the arrow for the talkbubble) to actually change colors with the rest of the element, as seen here: 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>
         <div class="talkbubble">
            <input type="hidden" class="tbselector" value="sbselection_3">
            <div class="thumbnail">
                 <img src="images/thumbnail1.png" height="33" width="30" align="middle" />
             </div>
             <div class="words">Eastern Eateries</div>
         </div>
        <div class="talkbubble">
             <input type="hidden" class="tbselector" value="sbselection_4">
             <div class="thumbnail">
                 <img src="images/thumbnail1.png" height="33" width="30" align="middle" />
             </div>
             <div class="words">Student Center</div>
         </div>
        <div class="talkbubble">
            <input type="hidden" class="tbselector" value="sbselection_5">
            <div class="thumbnail">
                <img src="images/thumbnail1.png" width="30" height="33" align="middle" />
            </div>
            <div class="words">Eagle Cafes</div>
        </div>
        <div class="talkbubble">
            <input type="hidden" class="tbselector" value="sbselection_6">
            <div class="thumbnail">
                <img src="images/thumbnail1.png" width="30" height="33" align="middle" />
            </div>
            <div class="words">Catering</div>
        </div>
    </div>
</div>

css

.clickables {
margin-left:auto;
margin-right:auto;
 }          
.talkbubble {
background: white;
color: rgb(0,0,0);
font-family: Rockwell, Garamond, "MS Serif", "New York", serif;
font-size: 14px;
height: 40px;
margin-top: 1%;
margin-left: 48%;
margin-right: auto;
position: relative;
width: 150px;   
z-index: 5;
 }
.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;
}
/*.selected {
background-color:rgb(194,194,194);
}*/
.thumbnail {
height: 33px;
width: 30px;
float: left;
position: absolute;
margin: 4px;
z-index: 2;
left: 2px;
top: 0px;
}
.words {
height: 24px;
width: 150px;
position: absolute;
float: right;
left: 40px;
top: 10px;
} 

javascript

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

http://ift.tt/1scZeKg

I did some research and it seems a little inconclusive. For the most part, a lot of what I found was basically saying that there's no way to really force javascript on a pseudo element, since the pseudo element doesn't REALLY exist. However, with more research, I found things like http://ift.tt/S6TjM2 and Change an input's HTML5 placeholder color with CSS that say that those bugs were fixed and it is possible with some browsers to use javascript on pseudo elements. What's the actual deal? How extensively can a person control pseudo elements?

asked 2 mins ago

Cosette Girardot

9

pseudo element control with javascript