Question

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

我想将mouseover和mouseout专门绑定到元素的：after标签，而不是在树上冒泡。绑定显然现在有效，但它没有看到：作为一个独立的元素后，这是我的问题点。

HTML：

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

CSS for 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);
});

请不要问我为什么我要做的详细或更改html设置，因为它是一个样式制作者，它就是它。

Answer 1

:before和:after伪元素不是DOM树的一部分，不能通过JavaScript访问，就像属于DOM的元素一样。因此，他们无法单独约束事件。

循环方式是使用真实DOM元素模拟:after伪元素，然后将事件绑定到该元素。

例如：

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

Answer 2

也许

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

然后

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

jQuery绑定mouseover / mouseout：之后

2 个答案: