如何使用CSS不可点击的区域？

假设我的包装div包含一些链接和图片，有没有什么办法可以一次性用CSS去激活它？如何使用CSS不可点击的区域？

答案后复查：
我放弃了这个想法，可以只用CSS做出来。 jQuery的blockUI插件就像魅力一样。

2009-04-22 jmoon

如果您打算使用jQuery，您可以使用blockUI插件轻松完成此操作。 ...或者用CSS回答您的问题，您必须将div完全放在您希望阻止的内容上。只需确保绝对定位的div在内容被阻止后进行z索引。

<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中进行过测试。

来源

2009-04-22 01:46:05 erikphipps

用另一个不可点击的元素来掩盖它。您可能需要使用JavaScript来打开和关闭此“封面”。你可以做一些聪明的事情，比如让它变成半透明或者其他的东西。

<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>

来源

2009-04-22 00:14:41

如果您的意思是不可点击，以至于用户无法复制并粘贴或以某种方式保存数据。这从来没有可能。所有这些网站都是健全的/看起来像他们有一些阻止拯救事物的方法并不是真的，他们采取的措施很容易解决。

来源

2009-04-22 00:21:16 Louis

你应该考虑应用jQuery的event.preventDefault函数。在这里你可以找到一个例子：

http://api.jquery.com/event.preventDefault/

TL; DR-版本：

$("#element-to-block").click(function(event) { 
    event.preventDefault(); 
}

BAM！

来源

2011-08-04 08:21:48 Motocarota

114

没有为一个CSS规则，但它没有被广泛使用，因为旧的浏览器的支持

pointer-events: none;

来源

2012-04-27 12:50:14 Dmitri

德米特里！你简短而又甜蜜的回答解决了我的问题。谢谢 – 2012-12-10 15:24:12

啊！我希望这也适用于Firefox！ – streetlight 2012-12-27 20:10:19

这些天，你可以定位一个伪元素上的内容。

.blocked 
{ 
    position:relative; 
} 
.blocked:after 
{ 
    content: ''; 
    position: absolute; 
    left:0; 
    right:0; 
    top:0; 
    bottom:0; 
    z-index:1; 
    background: transparent; 
}

http://jsfiddle.net/HE5wR/27/

来源

2014-01-31 08:38:34 towr

如何使用CSS不可点击的区域？

回答

相关问题