Как сделать область, не подлежащую щелчку, с помощью CSS?

Question

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

---

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

Answer 1

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

pointer-events: none;

Answer 2

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

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

Answer 3

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

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

Я думаю, что это тоже работает:

CSS

pointer-events: none;

Answer 6

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

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

TL; DR-версия:

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

БАМ!

Answer 7

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