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

问题描述

我正在使用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％的值会更好。

解决方法

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

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

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

,

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

transform: translate( 0,-50%); 

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

希望我有所帮助！