html - jQuery bind mousover/mouseout :after -

i think have brain teaser here.

i want bind mouseover , mouseout :after tag of element, without bubbeling down tree. bind works now, doesn't see :after independant element, point of problem.

html:

<div class="menuitem editable"></div> 

css after:

.menuitem:after {   padding:2px;   position: absolute;   right: 0px;   font-family: 'chevron';   speak: none;   font-style: normal;   font-weight: normal;   font-variant: normal;   text-transform: none;   line-height: 1;   -webkit-font-smoothing: antialiased;   content: "\f054";   top: 45%;   margin-top: -0.5em;   border-top-left-radius:3px;   border-bottom-left-radius:3px;   font-size:15px; } 

js:

$('.editable').bind('mouseover', function(event) {     event.stoppropagation();     $(this).addclass('focus'); }); $('.editable').bind('mouseout', function(event) {     event.stoppropagation();     $(this).removeclass('focus'); }); $('.menuitem:after').bind('mouseover', function(event) {   event.stoppropagation();   after_color = $(this).css('background');   alert(after_color);   $(this).css('background', 'rgba(0,0,0,0.5)'); }); $('.menuitem:after').bind('mouseout', function(event) {   event.stoppropagation();   $(this).css('background', after_color); }); 

please don't ask me why i'm doing in detail or change html setup, cause it's stylebuilder , is.

the :before , :after pseudo elements not part of dom tree , cannot accessed via javascript elements part of dom. , hence cannot individually bound events.

a round-about way emulate :after pseudo element real dom element , binding events instead.

for ex:

<div class="menuitem editable">     <div class="after">arrow</div> </div> 

css

.menuitem {      position: relative;      overflow: visible; } .menuitem .after {     position: absolute;     display: none;     ... } .menuitem.hovering .after {     display: block; } 

javascript

$('.menuitem').on('mouseover', function() {     $(this).addclass('hovering'); }); $('.menuitem').on('mouseout', function() {     $(this).removeclass('hovering'); }); 

and then...

$('.menuitem .after').on('mouseout', function() {     // stuff ... });