JQuery bind mouseover/mouseout: après

Question

Je pense que j'ai un casse-tête ici. Je veux lier le mouseover et le mouseout spécifiquement à la balise: after d'un élément, sans qu'il ne descende vers le bas de l'arbre. Le bind fonctionne évidemment maintenant, mais il ne voit pas: après comme un élément indépendant, ce qui est le point de mon problème.

html:

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

CSS après:

.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); 
}); 

S'il vous plaît ne me demandez pas pourquoi je fais en détail ou modifier le code html configuration, parce que c'est pour un constructeur de style et c'est ce que c'est.

Answer 1

Les pseudo-éléments :before et :after ne font pas partie de l'arborescence DOM et ne sont pas accessibles via JavaScript comme les éléments qui font partie du DOM. Et par conséquent, ils ne peuvent pas être individuellement liés à des événements.

Une méthode indirecte consisterait à émuler l'élément pseudo :after avec un élément DOM réel, puis de lier les événements à celle-ci.

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'); 
}); 

Et puis ...

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

Answer 2

Peut-être

content: '<i class="some">...</i>'; 

puis

$('.some').bind('mouseout', function(event) { 
    //your function 
});