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

【问题标题】：Setting top and left in percent instead of pixels以百分比而不是像素设置顶部和左侧
【发布时间】：2020-10-04 04:29:54
【问题描述】：

我正在使用 codrops 图像在项目 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% 的值会更好。

【问题讨论】：

标签： javascript css hover position mouse-position

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

transform: translate( 0, -50%);

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

希望对我有所帮助！

【讨论】：