查看下面的代码,您可以看到一个关闭图标 float 在 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 功能?
最佳答案
一般来说,伪元素会继承分配给“拥有”它的非伪元素的事件和事件行为。
例如,添加一个 click
上述事件监听器<span>
将导致该 span elemenet 的任何伪元素继承相同的点击事件行为。
如果你想实现伪元素和“所有者”元素之间的独立性,在 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>
关于javascript - CSS:是否有可能使::after 选择器表现得像一个按钮?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58261945/