Wie kann ich einen Bereich mit CSS nicht anklickbar machen?

Question

Lassen Sie uns sagen, wenn ich Wrapper div, die einige Links und Bilder enthält, gibt es eine Möglichkeit, ich kann es sofort deaktivieren mit nur CSS?

---

Nach Überprüfung der Antworten:
ließ ich die Idee, dass es mit CSS nur machen kann. jQuery blockUI Plug-in funktioniert wie Charme.

Answer 1

Wenn Sie jQuery verwenden möchten, können Sie dies einfach mit dem blockUI-Plugin erreichen. ... oder um Ihre Frage mit CSS zu beantworten, müssen Sie das div unbedingt über den Inhalt positionieren, den Sie blockieren möchten. Stellen Sie nur sicher, dass das absolut positionierte div nach dem zu blockierenden Inhalt für die z-Indizierung kommt.

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

Entschuldigung für alle Inline-CSS. Du musst ein paar nette Stunden machen. Dies wurde auch nur in Firefox und IE7 getestet.

Answer 2

Verdecken Sie es mit einem anderen nicht anklickbaren Element. Sie müssen möglicherweise JavaScript verwenden, um diese "Abdeckung" ein- und auszuschalten. Du kannst etwas Cleveres machen, wie halbtransparent oder sowas.

<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

Wenn Sie meinen unclickable so dass die Benutzer nicht kopieren und fügen Sie ihn oder die Daten irgendwie speichern. Nein, das war nie möglich. All diese Websites, die es gibt, sind solide/sehen so aus, als hätten sie eine Möglichkeit, die Speicherung von Daten zu blockieren, und nicht wirklich, und welche Maßnahmen sie auch immer ergreifen, sind leicht zu umgehen.

Answer 4

Sie sollten in Erwägung ziehen, die event.preventDefault-Funktion von jQuery anzuwenden. Hier können Sie ein Beispiel finden:

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

TL; DR-Version:

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

BAM!

Answer 5

Es gibt eine CSS-Regel für das, aber es ist nicht weit, weil der alte Browser verwendet unterstützen

pointer-events: none;

Answer 6

In diesen Tagen können Sie nur ein Pseudo-Element über den Inhalt positionieren.

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