jQuery 绑定(bind)鼠标悬停/鼠标悬停 :after

Question

我想我这里有一个脑筋急转弯。

我想将 mouseover 和 mouseout 专门绑定(bind)到一个元素的 :after 标签，而不是在树上冒泡。绑定(bind)现在显然有效，但它没有将 :after 视为独立元素，这是我的问题所在。

html:

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

之后的 CSS:

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

请不要问我为什么要详细说明或更改 html 设置，因为它是用于样式构建器的，它就是这样。

Answer 1

:before 和 :after 伪元素不是 DOM 树的一部分，不能像 DOM 的一部分元素那样通过 JavaScript 访问。因此它们不能单独绑定(bind)到事件。

一种迂回的方法是使用真实的 DOM 元素模拟 :after 伪元素，然后将事件绑定(bind)到该元素。

例如:

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

然后……

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