¿Cómo puedo hacer que un área no se pueda hacer clic en CSS?

Question

Digamos que si tengo envoltorio div que incluye algunos enlaces e imágenes, ¿hay alguna forma en que pueda desactivarlo de inmediato con solo CSS?

---

Después de la revisión de las respuestas:
me cayó la idea de que puede hacer que sea sólo con CSS. jQuery blockUI plug in funciona como encanto.

Answer 1

si va a utilizar jQuery, puede lograrlo fácilmente con el complemento blockUI. ... o para responder a tu pregunta con CSS, tendrás que posicionar absolutamente el div sobre el contenido que deseas bloquear. solo asegúrese de que el div que se encuentra en la posición correcta aparece después de que el contenido se bloquee para fines de indexación 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> 

perdón por todo el inline css. Tendrás que hacer algunas buenas clases. Además, esto solo se ha probado en Firefox e IE7.

Answer 2

Cúbralo con otro elemento que no se puede hacer clic. Es posible que necesite usar JavaScript para activar y desactivar esta "cubierta". Puedes hacer algo inteligente como hacer que sea semitransparente o algo así.

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

Answer 3

Si quieres decir que no se puede hacer clic para que los usuarios no puedan copiarlo y pegarlo o guardar los datos de alguna manera. No, esto nunca ha sido posible. Todos esos sitios que hacen sonido/parece que tienen alguna manera de bloquear cosas que realmente no se guardan y las medidas que implementan se solucionan fácilmente.

Answer 4

Debería considerar aplicar la función event.preventDefault de jQuery. Aquí puede encontrar un ejemplo:

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

TL; DR-version:

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

BAM!

Answer 5

Hay una regla CSS para eso, pero no es ampliamente utilizado debido a los navegadores antiguos apoyan

pointer-events: none;

Answer 6

estos días se puede simplemente colocar un pseudo-elemento sobre el contenido.

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