Комбинация событий указателя hover css
У меня есть изображение, которое нужно запретить людям сохранять или перетаскивать, поэтому я использую
pointer-events: none;
но затем я также хочу добавить масштабирование с эффектом наведения, например:
transform: scale(1.5);
Есть ли способ добиться этого?
Ответы 2
Вы можете установить pointer-events:none; на изображение, но обернуть его в другой элемент, чтобы вызвать действие наведения.
.image-wrapper {
display: inline-block;
overflow: hidden;
font-size: 0;
}
.image-wrapper:hover img {
transform: scale(1.5);
}
img {
transition: all .3s ease-out;
pointer-events: none;
}<div class = "image-wrapper"><img src = "https://picsum.photos/200/300"></div>Не обязательно — посмотрите формат здесь и запустите сниппет. image-wrapper:hover img — это селектор css, означающий, что при наведении курсора на div-оболочку применяются стили к содержащемуся в нем изображению.
Я не знал, что вы можете использовать наведение на img с .image-wrapper, сработало как шарм, спасибо
Как вы видели, pointer-events: none остановит реакцию элемента на любые движения мыши или клики вообще, а это не то, что вам нужно.
Чтобы предотвратить перетаскивание, вы можете просто добавить атрибут draggable = "false" к своему изображению.
Чтобы отменить клики, вы можете добавить прослушиватель событий, чтобы щелкнуть, а затем вызвать event.preventDefault() или return false. Быстрый и грязный способ сделать это:
<img draggable = "false" onclick = "return false;"/>
Однако есть гораздо более аккуратные и приятные способы прикрепления javascript к вашим элементам.
Важно знать, что отключение нажатия и перетаскивания не помешает тому, кто действительно хочет сохранить ваше изображение, сохранить его — и вы ничего не можете сделать, если кто-то настроен на В самом деле. Если пользователь может видеть изображение, он может сохранить изображение. Это может сделать его немного более раздражающим, чего может быть достаточно для вашего случая.
Спасибо за аккуратный ответ Beenjamin, хотя я искал решение с чистым css
Без проблем! Я считаю, что CSS — это «отображаемый» слой, и поэтому, хотя вы можете в некоторой степени контролировать поведение с его помощью, более надежно использовать собственное поведение браузера в самом HTML, где это возможно.
Я думал об этом, но эффект наведения на div.image-wrapper заставляет сам div уменьшаться, я хочу, чтобы изображение уменьшалось, но все еще содержалось внутри div