设置顶部和左侧百分比而不是像素

Question

我在项目https://tympanus.net/codrops/2018/11/27/image-reveal-hover-effects/上使用 codrops 图像显示悬停效果，它工作正常（我正在使用效果 5）。

我想对这一点做一个小小的改变

            this.positionElement = (ev) => {
            const mousePos = getMousePos(ev);
            const docScrolls = {
                left : document.body.scrollLeft + document.documentElement.scrollLeft,
                top : document.body.scrollTop + document.documentElement.scrollTop
            };
            this.DOM.reveal.style.top = `${mousePos.y+20-docScrolls.top}px`;
            this.DOM.reveal.style.left = `${mousePos.x+20-docScrolls.left}px`;
        };

它设置元素位置的位，最后一部分，以 px 为单位设置，我可以用百分比设置该部分吗？，我希望图像在鼠标光标下居中。 我可以通过将值设置为图像宽度和高度的减半来实现，但是如果我想让图像在较小的屏幕上变小，那就不好了。 所以 -50% 的值会更好。

Answer 1

您应该只更改hover-reveal类的 css，以便它包含以下行：

transform: translate(-50%, -50%);

这样，当它悬停文本时，图像将在鼠标正下方居中，因为您将其向上和向右移动了图片高度和长度的 50%。

Answer 2

在我看来，您需要更改的不是pixel到百分比，而是要显示的图片的锚点。 您可以通过以下方式更改：

transform: translate( 0, -50%); 

我不确定第一个输入会更改x轴和第二个参数y ，反之亦然。 但这是一种或另一种方式。

希望我有所帮助！