Question

请看下面的代码，您会看到span元素的右边有一个关闭图标。

span {
    width: 100%;
    display: inline-block;
}

span:after {
    content: "\2715";
    float: right;
    position: absolute;
}

span:hover:after {
    cursor: pointer;
}

<span>Content</span>

我希望:after像按钮一样。如您所见，它使光标成为悬停指针。如何使其表现得像按钮？例如，如何向其添加onclick函数？

Answer 1

通常，伪元素将继承事件和分配给“拥有”它的非伪元素的事件行为。

例如，向上述click添加<span>事件监听器将导致该span elemenet的任何伪元素继承相同的click事件行为。

如果您想在伪元素和“所有者”元素之间实现独立性，就click行为（即仅针对“伪”元素的点击行为）而言，可以使用pointer-events CSS属性如下所示：

const span = document.querySelector("span");

span.addEventListener("click", () => alert("hey!"));

span {
    display: inline-block;
    position: relative;
    background:red;
    /* Blocks the click event from firing when span is clicked */
    pointer-events:none;
}

span:after {
    content: "'Pesudo button' - click me!";
    position: absolute;
    margin-left:1rem;
    background:green;
    width:15rem;
    text-align:center;
    color:white;
    /* Allows the click event to fire when the pesudo element is clicked */
    pointer-events:all;
}

span:hover:after {
    cursor: pointer;
}

<span>I own the pesudo element</span>

CSS：是否可以使:: after选择器的行为类似于按钮？

1 个答案: