Question

我有一张图片需要防止他人保存或拖动，所以我使用

pointer-events: none;

但是我还想添加悬停效果缩放，例如：

transform: scale(1.5);

有没有办法做到这一点？

Answer 1

您可以在img上设置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>

Answer 2

如您所见，pointer-events: none将完全停止元素对任何鼠标移动或单击的反应，这不是您想要的。

为防止拖动，您只需将draggable="false"属性添加到图像即可。

要取消点击，您可以添加事件监听器以单击，然后调用event.preventDefault()或return false。快速而肮脏的方法是：

<img draggable="false" onclick="return false;"/>

不过，much neater and nicer ways可以将javascript附加到您的元素上。

重要的是要知道，禁用单击和拖动操作不会阻止真正想保存您图像的人保存它-并且，如果真的确定了某人，您将无能为力。如果用户可以看到图像，则用户可以保存图像。这可能会使它更烦人，对于您的情况可能就足够了。

指针事件结合悬停CSS

2 个答案: