jQuery how to click a pseudo class element :after

Question

How can I click this pseudo element :after? I used CSS to make an overlay, I guess is quite clever but I have to click it in order to close the overlay (:after).

http://jsfiddle.net/M6hm9/1/

JavaScript

if($('.open-sidebar').is(':visible')){
    $('.navigation-wrap').attr('menu-overlay').bind('click', function(){
     $(this).removeClass('open-sidebar');
  });
}

CSS

&:after {
     content: attr(menu-overlay);
     position:absolute;
     top:0;
     bottom:0;
     left: 0;
     right:0;
     width: 100%;
     height: 100%;
     background: rgba(6, 16, 35, 0);
     z-index: -1;
     cursor: pointer;   
}

You can't as it's not a DOM object. You would have to use another function on the overlaid element to remove it. — Paulie_D, Mar 28 '14 at 12:08

score 0 · Answer 1 · answered Mar 28 '14 at 12:11

0

That is not possible since pseudo elements are not part of the DOM and you cannot bind events on them. (That's why they called 'pseudo' elements).

You need to put your overlay in its own element.

answered Mar 28 '14 at 12:11

Max Al Farakh

4,386
4
29
56

score 0 · Accepted Answer · answered Mar 28 '14 at 12:22

0

I was confronted with this same issue a few days ago, and I came here to search for an answer, which I found with no problem. I had to put the pseudo-element in span tags in order to get a reference to it with javascript.

answered Mar 28 '14 at 12:22

lennon626

124
6

can you give example ? – Halil Nov 03 '21 at 11:05

jQuery how to click a pseudo class element :after

2 Answers2