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

Question

我在一个项目上使用 codrops image reveal hover effect https://tympanus.net/codrops/2018/11/27/image-reveal-hover-effects/ 并且工作正常（我正在使用效果 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

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

transform: translate( 0, -50%);

我不确定第一个输入会改变 x 轴和第二个参数 y 还是相反。但这是一种或另一种方式。

希望我对您有所帮助！

Answer 2

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

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

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

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

Setting top and left in percent instead of pixels

javascript

css

hover

position

mouse-position