0

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

我想将 mouseover 和 mouseout 专门绑定到元素的 :after 标记，而不会在树下冒泡。绑定现在显然有效，但它没有将 :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 设置，因为它是为样式构建器而设计的，它就是这样。

4

2 回答 2

2

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

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

例如：

<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 ...
});
于 2013-09-04T14:00:58.660 回答
0

也许

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

然后

$('.some').bind('mouseout', function(event) {
    //your function
});
于 2013-09-04T14:00:59.097 回答