指针事件组合悬停 css

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 到您的元素。

重要的是要知道，禁用单击和拖动不会阻止真正想要保存您的图像的人保存它 - 如果有人真的[=29=，您实际上无能为力] 决定。如果用户可以看到图像，则用户可以保存图像。它可能会让它稍微更烦人，这可能足以满足您的情况。

指针事件组合悬停 css

Pointer event combine hover css

html

css

css-transforms