0

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;   
}
Improve this question
3
  • You can't as it's not a DOM object. You would have to use another function on the overlaid element to remove it. Commented Mar 28, 2014 at 12:08
  • @rm-vanda duplicate of what? Commented Mar 28, 2014 at 13:27
  • See top of your post. Commented Mar 28, 2014 at 13:27

2 Answers 2

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

can you give example ?
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.

Improve this answer

Comments