假设我有一个包含一些链接和图片的包装 div,有没有仅使用 CSS 就能一次性禁用它的方法?
经过回答的审查:
我放弃了仅使用 CSS 实现的想法。
jQuery blockUI 插件效果很好。
假设我有一个包含一些链接和图片的包装 div,有没有仅使用 CSS 就能一次性禁用它的方法?
经过回答的审查:
我放弃了仅使用 CSS 实现的想法。
jQuery blockUI 插件效果很好。
现在你可以将伪元素放置在内容上方。
.blocked
{
position:relative;
}
.blocked:after
{
content: '';
position: absolute;
left:0;
right:0;
top:0;
bottom:0;
z-index:1;
background: transparent;
}
.blocked a:after
伪元素,您可以将其放置在div上,使其成为链接本身的一部分,从而使整个div区域可点击,而不是阻止它。 - towrdiv
不可点击,只有链接可以点击,尽管使用了CSS。请参见http://jsfiddle.net/HE5wR/26/。顺便说一下,您的JavaScript中有一个错误,使用了`isn't`,导致字符串过早结束并出现控制台错误。我认为您是在说伪元素也是“热点”,因此它作为链接起作用,尽管它位于原始链接的上方。 - Chloe我认为这个也可以用:
CSS
pointer-events: none;
<div style="position:relative;width: 200px;height: 200px;background-color:green">
<div>
<a href="#">Content to be blocked.</a>
</div>
<div style="position: absolute;top:0;left:0;width: 200px;height:200px;background-color: blue;z-index:2;opacity:0.4;filter: alpha(opacity = 50)"></div>
</div>
很抱歉所有的内联CSS。你需要创建一些好看的类。此外,这只在Firefox和IE7中进行了测试。
<style>
#cover {position:absolute;background-color:#000;opacity:0.4;}
</style>
<div id="clickable-stuff">
...
</div>
<div id="cover">
</div>
<script type="text/javascript">
function coverUp() {
var cover = document.getElementById('cover');
var areaToCover = document.getElementById('clickable-stuff');
cover.style.display = 'block';
cover.style.width = //get areaToCover's width
cover.style.height = //get areaToCover's height
cover.style.left = //get areaToCover's absolute left position
cover.style.top = //get areaToCover's absolute top position
}
/*
Check out jQuery or another library which makes
it quick and easy to get things like absolute position
of an element
*/
</script>
http://api.jquery.com/event.preventDefault/
简短版:
$("#element-to-block").click( function(event) {
event.preventDefault();
}
砰!
如果您的意思是使用户无法复制、粘贴或以某种方式保存数据,那么不,这从来都不可能。
您可以使用jQuery BlockUI插件或CSS规则pointer-events: none;
,但这并不能真正防止人们复制您的文本或图像。
最坏的情况下,我总是可以使用wget
下载您的内容,而最好的情况下,无论是CSS还是JS方法都很容易被插件绕过,比如: