cursor: no-drop; при pointer-events: none;

342

13 февраля 2017, 13:42

Здравствуйте.

Подскажите мне, пожалуйста, возможно ли с помощью CSS добиться такого эффекта, чтобы элемент (например,ссылка) вёл себя, как при pointer-events: none для кликов, но чтобы на нем работало свойство cursor (именно на нем, а не на других элементах)?

Хочу так:

.no{
  cursor: no-drop;
  pointer-events: none;
}

Но cursor: no-drop; не работает при pointer-events: none;. Без pointer-events: none; отлично работает.

Пример с cursor: no-drop; и без pointer-events: none; здесь

Answer 1

pointer-events: none и cursor взаимоисключающие, если их применять к одному и тому же элементу. Добавьте pointer-events ко внутреннему элементу, а cursor ко внешнему:

.no{ 
  cursor: no-drop; 
  background: #1DB6BD; 
  font-weight: bold; 
  color: #fff; 
  display: inline-block; 
} 
.no span{ 
  padding:10px; 
  display: inline-block; 
} 
.no2{ 
  cursor: no-drop; 
  background: #1DB6BD; 
  font-weight: bold; 
  color: #fff; 
  display: inline-block; 
} 
.no2 span{ 
  padding:10px; 
  pointer-events: none; 
  display: inline-block; 
}

<a class="no"><span>Без pointer-events</span></a> 
<br/> 
<br/> 
<br/> 
<br/> 
<a class="no2"><span>С pointer-events</span></a>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

cursor: no-drop; при pointer-events: none;

Как получить ответ от приложения в командной строке cmd?

Переход на другую версию Visual Studio, INotifyPropertyChanged

Обновить после добавления в БД (MySQL)

Не удается записать в ListView