如何解决设置顶部和左侧的百分比,而不是像素
我正在使用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
还是相反。
但这是另一种方式。
希望我有所帮助!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。