Как сделать область незаметной с помощью CSS?

Question

Скажем, если у меня есть обертка div, которая содержит некоторые ссылки и изображения, есть ли способ отключить его сразу с помощью CSS?

---

После рассмотрения ответов:
я отказался от этой идеи, что может сделать это только с помощью CSS. jQuery blockUI plug in работает как шарм.

Answer 1

Если вы собираетесь использовать 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.

Answer 2

Закройте его другим элементом, не подлежащим щелчку. Возможно, вам придется использовать 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> 

Answer 3

Если вы имеете в виду unclickable, чтобы пользователи не могли копировать и вставлять его или сохранять данные как-то. Нет, это никогда не было возможным. Все те сайты, которые делают, звучат/выглядят так, будто у них есть какой-то способ блокировать экономию вещей, а не на самом деле, и какие бы меры они не применяли, легко работать.

Answer 4

Вы должны рассмотреть возможность применения функции event.preventDefault для jQuery. Здесь вы можете найти пример:

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

TL; DR-версия:

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

БАМ!

Answer 5

Существует правило CSS для этого, но это не так широко используется из-за старые браузеры поддерживают

pointer-events: none;

Answer 6

В эти дни вы можете просто поместить псевдо-элемент над содержанием.

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