Moving pseudo elements to another on jQuery click event

Question

I wish to create a jQuery slider (and hold off on marking this as duplicate just yet) with the code below.

<div class="jumbotron">
    <div class="top">
        <div class="arrow-next">Next</div>
            <div class="arrow-prev">Prev</div>
    </div>
    <div class="bottom">
        <div class="row">
            <div class="col-md-4 info-box"></div>
            <div class="col-md-4 info-box"></div>
            <div class="col-md-4 info-box"></div>
        </div>
    </div>
</div>

 .jumbotron {
        margin: 0; padding: 0;
        position: relative;
    }
    .jumbotron .bottom {
        position: absolute; bottom: 0; left: 0; right: 0; height: 30%;
        background-color: lightseagreen; padding: 0;
    }
    .jumbotron .bottom .row {
        position: absolute; top: 0; bottom: 0; right: 0; left: 0;
    }
    .jumbotron .bottom .info-box {
        position: relative;  margin: 0;
    }
    .jumbotron .top {
        position: absolute; top: 0; left: 0; right: 0; height: 70%;
        background-color: darkgrey;
    }
    .jumbotron .bottom .info-box:first-child:after {
        content: "";
        position: absolute; top: -14px; left: 48%; right: 48%;
        border: 15px lightseagreen solid; border-top: none; border-left: 15px transparent solid; border-right: 15px transparent solid;
    }
    .jumbotron .info-box {
        border-right: 1px white solid;
        min-height: 100%;   
    }
    .arrow-next, .arrow-prev {
        position: absolute; bottom: 0; top: 0; right: 0; width: 50px; vertical-align: middle; text-align: center;
        background-color: rgba(54,54,54,0.6); z-index: 999; color: white; display: none;
    }
    .arrow-prev {
        position: absolute; left: 0; bottom: 0; top: 0; right: none;    
    }

$('.jumbotron').css("height",$(window).height()-$('.navbar').height());
            $('.top').mouseenter(function() {
                $('.arrow-next, .arrow-prev').fadeIn(1000);
            });
            $('.top').mouseleave(function() {
                $('.arrow-next, .arrow-prev').fadeOut(1000);
            });
            $('.arrow-next').click(function() {
                var currentSlide = $('.info-box:after');
                var nextSlide = currentSlide.next();

                if(nextSlide.length === 0) {
                    nextSlide = $('.info-box').first();
                }

                currentSlide.fadeOut(600).removeClass('.info-box:after');
                nextSlide.fadeIn(600).addClass('info-box:after');
            });

My problem is my jQuery, which I can't seem to get to work. What I wish for is to move the pseduo class after from the first to second to third (and back to the first) child of the info-boxes when arrow-next is clicked (and arrow-prev for the opposite). I'm unsure as to whether you can move pseudo elements with jQuery, as the triangular effect I'm looking for with the :after element is more difficult to achieve with non-pseudo elements.
Thank you in advance. Here is a jsfiddle.

Edit: My question is different from the supposed duplicate as I am wishing to actually amend properties of the element, not the content. That supposed duplicate does not explain that in the least.

Possible duplicate of [Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery](http://stackoverflow.com/questions/5041494/selecting-and-manipulating-css-pseudo-elements-such-as-before-and-after-usin) — JNF, Nov 10 '15 at 09:42

score 0 · Accepted Answer · answered Nov 10 '15 at 09:42

0

How about adding the :after to a special class and then just move that class around? I don't think you can even touch psuedo elements with selectors

css

.arrowTriangle { }
.arrowTriangle:after { "some code" }

answered Nov 10 '15 at 09:42

NachoDawg

1,533
11
21

That is a fair point, however I've already got a few absolutely positioned elements within .bottom, I feel that when you have too many like that it just gets messy (to get the triangle:after in the same place I would have to absolutely position the .arrowTriangle around the .info-box – Nov 10 '15 at 09:44
I'm not following. Absolute positioned elements? Aren't we talking about moving a class between the ".info-box" elements on a click event? This problem sounds like a job for classes. – NachoDawg Nov 10 '15 at 09:48
Yes we are. But I meant that if I were to recreate the triangle as a pseudo element on a new element, I would need to absolutely position that new class that it is attached to. Actually, I'll try it and get back to you. – Nov 10 '15 at 09:49
I don't think just somehow moving the ":after" psuedo would help you avoid that % problem – NachoDawg Nov 10 '15 at 09:51

Moving pseudo elements to another on jQuery click event

1 Answers1