下面是我的代码。我已经尝试过。当这个弹出窗口出现时，我想使用这个关闭按钮来关闭整个弹出框。
CSS代码
.bigdiv{
display:none;
background-color:#efefef;
box-shadow: 10px 10px 10px 100000px rgba(0, 0, 0, 0.4);
border:2px solid #efefef;
width:400px;
height:300px;
position:fixed;
z-index:500;
top:25%;
left:25%;
margin:0 auto;
padding:20px;
}
.bigdiv:after {
cursor:pointer;
content:url('http://static.doers.lk/img/closebox.png');
position: relative;
right: -195px;
top: -310px;
z-index: 999;
}
JQUERY
$(".left div").click(function () {
$(".bigdiv").show("slow");
$(".bigdiv").click(function () {
$(".bigdiv").hide();
}) ; }) ;
HTML
<div class="left">
<div>intro text here</div><div></div><div></div>
</div>
<div class="bigdiv">some content</div>
我想选择 :after 元素。如何使用 jquery 做到这一点？
最佳答案
I want to select :after elements .how to do that using jquery ?
你不能，生成的伪元素在 DOM 中不存在(遗憾的是)。
我们可以这样证明:
CSS:
#foo:before {
content: '[Before]'
}
#foo:after {
content: '[After]'
}
HTML:
<body><div id="foo">Foo</div></body>
JavaScript:
(function() {
var msgs = [];
var child;
var div;
for (child = document.body.firstChild;
child;
child = child.nextSibling) {
if (child.id) {
msgs.push("Child " + child.nodeName + "#" + child.id);
}
else {
msgs.push("Child " + child.nodeName);
}
}
div = document.createElement('div');
div.innerHTML = msgs.join("<br>");
document.body.appendChild(div);
})();
从上面产生的页面(如果我们假设 script 元素被添加到 body 最后)是:
[Before]Foo[After] Child DIV#foo Child SCRIPT
如您所见，就 DOM 而言，生成的伪元素根本不存在。
关于javascript - 如何选择:after element using jquery，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14001350/