使用javascript单击伪元素？

小编典典

使用javascript单击伪元素？

css

我想知道如何启用对:before伪元素的单击（我链接到下面的JSfiddle上div的橙色部分）。我读过，由于伪元素不在DOM中，因此您需要对此进行破解。不幸的是，我找不到实际显示有效代码的现有Stackoverflow问答。

HTML：

<div></div>

CSS：

div { position:relative; background-color:#333;
      padding:20px; margin:20px; float:left; 
}

div:before { content:""; display:block; 
    padding:5px; background-color:#f60; border:2px solid white; 
    position: absolute; top:-2px; right:-2px; border-bottom-left-radius: 10px; 
}

阅读 310

2020-05-16

共1个答案

小编典典

一种解决方法是将a动态添加<span>到该项目并为其分配click方法。

var item = $('<span />');
item.click(function() { alert('click'); });
$('div').append(item);

CSS

div { position:relative; background-color:#333;
      padding:20px; margin:20px; float:left;
}

div span { content:""; display:block;
    padding:5px; background-color:#f60; border:2px solid white;
    position: absolute; top:-2px; right:-2px; border-bottom-left-radius: 10px;
}

2020-05-16