'Cursor:pointer' 转换后不准确答案

【问题标题】：'Cursor: pointer' is not accurate after transformation'Cursor:pointer' 转换后不准确
【发布时间】：2020-06-19 09:09:00
【问题描述】：

我目前正在尝试创建一个网页，该网页的部分底部有一个箭头，单击它会导致屏幕滚动到另一个部分。我刚刚尝试通过在您位于可点击图标上方时将光标更改为指针来使此用户友好。问题是光标会变成一个指针，但是它不在图标的顶部，而是稍微远离它。当鼠标悬停在图标上时，没有指针。

以下是 HTML 和 CSS 中相关代码的一些 sn-ps：

HTML：

<div class="LPNavBox">
    <p>Look at this stuff</p>
    <div class="LPDownArrow">
        <i class="fas fa-chevron-down fa-2x"></i>
    </div>
</div>

CSS：

.LPNavBox{
    position: absolute;
    left:50%;
    top:95%;
    transform: translate(-50%, -50%);
    background-color: #ff253a;
}

.LPNavBox p{
    font-family: 'Spartan', sans-serif;
    font-size: 0.75vw;
    letter-spacing: 0.05vw;

    opacity: 60%;
    color: whitesmoke;
}

.LPDownArrow {
    width:45px;
    height:20px;
    padding-top: 2vh;
    padding-bottom: 1vh;
    transform: translateX(12.5vh);

    cursor: pointer;

    background-color: mediumpurple;
}

.fa-chevron-down{
    position: absolute;
    top:0;
    left:20%;
    opacity: 70%;
    transform: scale(1.15,1);

    color: whitesmoke;
}

我在下面附上了一张图片，显示了两个 div 框区域，绘制的蓝色框大致显示了光标变为指针的位置。

如果有人能对此有所了解，将不胜感激，谢谢。

编辑---

似乎transform: translate() 混淆了指针更改的边界，有没有办法重新定位某些东西而不会弄乱？

【问题讨论】：

标签： html css font-awesome

【解决方案1】：

transform: translateX(12.5vh) 弄乱了盒子的位置...我将其切换为 margin: 0 auto; 并且它居中。

Codepen

【讨论】：

我刚刚尝试过，不幸的是它并没有解决我的问题，但是我做了一些测试，它确实表明transform: translate() 确实弄乱了盒子的位置。