Отключение ссылки используя css

При разработке сайтов можно столкнуться с необходимостью убрать возможность перехода по какой-либо ссылки. Нужно это, чаще всего, по причине отсутствия контента, но «блок выглядит красиво, давайте его оставим и просто уберите переходы». Как-то так… В целом, на некоторых шаблонах данная манипуляция и правда не лишена смысла.

Делается все достаточно просто. Нужно в стили css добавить следующий код:

.disabled { 
     pointer-events: none; 
     cursor: default;
}

А нужному элементу присвоить класс disabled. Будет как-то так:

<a href="#" class="disabled">link</a>

Если нет возможности добавить класс, то просто определите класс элемента и добавьте в стилях ему свойства класса disabled.

А что там с IE ?

Ходят упорные слухи о том, что IE до сих пор пользуется спросом. В связи с этим, приходится подстраиваться. Так как IE подстраиваться не хочет… Специально для него в конструкцию следует добавить display:block или display:inline-block. Вся конструкция будет выглядеть примерно так:

<a style="pointer-events: none; display: inline-block;" href="#">...</a>