CODEWITHSUNDEEP
javascriptjqueryhtmlcsspseudo-element
petiteco24601
petiteco24601

Reputation: 85

pseudo element control with javascript

I'm 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>
         .
         . More and more
         .
    </div>
</div>

CSS Just Relevant

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

Here is a Demo http://jsfiddle.net/petiteco24601/3xuuq2fx/

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://css-tricks.com/pseudo-element-animationstransitions-bug-fixed-in-webkit/ and Change an HTML5 input's 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?

Upvotes: 5

Views: 753

Answers (3)

Mr_Green
Mr_Green

Reputation: 41832

If you are looking for only CSS solution without using javascript. Here it is:

Working Fiddle

I wrapped each list-item block with a label and radio button in HTML code. and in CSS, I added the following 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;
}

..and also removed !important as suggested by Danko.

Upvotes: 2

Ryan Willis
Ryan Willis

Reputation: 624

The only way I have been able to change pseudo CSS declarations has been to create individual <style> tags with and id associated with the class of the elements they are applied to. I.E.

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

So, when you handle the click event, you get the style element and change the innerHTML to whatever CSS you want, along with the !important option added to each definition. Like this:

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

Upvotes: 1

DaniP
DaniP

Reputation: 38252

The way you can go is add or remove a new class.

  • First remove the !important declaration on your CSS is bad practice and can be conflictive later.

  • Then make a new class with the change you want :

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

  • Then with Jquery add / remove the class:

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

Check this DemoFiddle

Upvotes: 2

Related Questions