我想知道如何启用:before
伪元素(我在下面链接到的JSfiddle上div的橙子部分)的点击。我读到过,由于伪元素不在DOM中,因此您需要一个hack。不幸的是,我找不到实际显示工作代码的现有Stackoverflow Q&A。
友情链接:http://jsfiddle.net/Vv6Eb/4/
超文本标记语言:
<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;
}
型
6条答案
按热度按时间ebdffaop1#
如果你知道圆“应该”在哪里,你可以使用三角函数来查看点击是否在圆内:http://jsfiddle.net/Vv6Eb/19/
字符串
bkkx9g8r2#
解决方法是动态地将
<span>
附加到项中,并为其分配一个click方法。Like this fiddle.字符串
CSS
型
8ljdwjyq3#
我知道你之前尝试过用途:,但对于这种情况,你不能创建一个新的div,并将其作为一个钩子使用,然后将其追加到原始div中吗?
这样的东西可能会起作用:
字符串
关于CSS:
型
wi3ka0sx4#
喜欢用jquery
7xzttuei5#
我的目的是解决了另一个变通方法,这只是添加一个子DIV。 Package 所有的子元素内的父到这个新的子DIV:
我的工作示例与问题陈述相同:See Fiddle
HTML:
字符串
**注意:忽略HTML中的
:before
,只是为了理解。CSS:
型
jQuery:
型
pdtvr36n6#
在Medium上有an article。
the CodePen
基本思想是跟踪伪元素的位置。下面的代码片段显示了一个没有边界半径的矩形的更一般的情况,并在单击伪元素时关闭父元素。