Is it possible to change :before using javascript or jQuery

Question

fiddle: https://jsfiddle.net/jzhang172/708p96v3/

I'm trying to change the :before background-color using jquery and javascript. From what I've researched, people say it's not possible. How do I change the color of the tint of this image then? If it's possible to do without :before, then that's also fine.

 $(function(){
 $('.div:before').addClass('wto');
    $('.div').css('background-color','orange');
    
    });

.div{
  height:500px;
  width:500px;
  background:url('http://movieboozer.com/wp-content/uploads/2015/05/my-neighbor-totoro-main-review.jpg');
  position:Relative;
}
.div:before{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  content:"";
  background:rgba(22, 255, 171, 0.88);
  transition:2s;
}
.div:hover:before{
  background:red;
}
body,html{
  position:Relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="div"></div>

score 4 · Answer 1 · answered Mar 08 '16 at 08:27

I suppose you want something this:

body,html {  position: Relative;}
.div {
  height: 500px;
  width: 500px;
  background: url('http://movieboozer.com/wp-content/uploads/2015/05/my-neighbor-totoro-main-review.jpg');
  position: Relative;
}
.div:before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  content: "";
  background: rgba(22, 255, 171, 0.88);
  transition: 2s;
}
/***********check this block**********************/
.div:hover:before {
  background: rgba(255, 0, 0, 0.88);
  transition: 2s;
}
/*************************************************/

<div class="div"></div>

score 1 · Answer 2 · answered Mar 08 '16 at 08:39

I came across one dirty trick. May be this might do your work.

 $(function(){
    $('#changeColor').click(function(){
      html = "<style>.div:before{background:rgba(22, 255, 171, 0.75) !important;}</style>"
    
      $('.div').append(html);
    });
});

.div{
  height:500px;
  width:500px;
  background:url('http://movieboozer.com/wp-content/uploads/2015/05/my-neighbor-totoro-main-review.jpg');
  position:Relative;
}
.div:before{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  content:"";
  background:rgba(0, 0, 0, 0.75);
  transition:2s;
}
body,html{
  position:Relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<a href="#" id="changeColor">Change</a>

<div class="div">&nbsp;</div>

score 1 · Answer 3 · edited May 23 '17 at 11:45

If I understand your question correctly, you're explicitly asking how you could do this with javascript.

To my knowledge, there is no way you can affect the pseudo-elements with javascript.

But again, if I'm not mistaken you don't care about pseudo-elements, you just want to colorize an image and change that color on :hover. That actually is possible, it's a bit complicated though, so I can't give you a solution here, just some pointers:

Option one: CSS filters and SVG

Did you know CSS had a filter property that lets you do things like adding blur or changing contrast? Here's a nice overview with examples.

With that property, you can also load a SVG filter and apply that filter to your element, image in your case and probably in most others. SVG filters let you specify a color matrix that can be used to colorized images, actually the CSS filter property already has one SVG filter built in, to colorize images sepia.

So here is a Tutorial about colorizing greyscale images. With a bit of trial and error I think you can build your own color matrix to do the same with color images (especially since they also explain how the sepia matrix works).

Be aware this method has its limits though.

Option two: Javascript magic

I won't write much about these since I found two posts on SO that tell you everything you need to know:

You could either write your own code to colorize the images or use a jQuery plugin to achieve that effect.

score 0 · Answer 4 · answered Mar 08 '16 at 08:27

Since your Div takes a background-image, I would change the value of background-color in Div instead and give :before's background-color a value of inherit.

.div
{
  background-color: rgba(22, 255, 171, 0.88);
}

.div:before
{
  background-color: inherit;
}

To change the background-color of Div:before:

Div.style['background-color'] = 'rgba(0, 255, 255, 0.88)';

Is it possible to change :before using javascript or jQuery

4 Answers4

Option one: CSS filters and SVG

Option two: Javascript magic