«Курсор: указатель» не является точным после преобразования - PullRequest
Новая
       4

«Курсор: указатель» не является точным после преобразования

1 голос
/ 06 марта 2020

В настоящее время я пытаюсь создать веб-страницу со стрелкой в ​​основании раздела, нажатие на которую приведет к прокрутке экрана до другого раздела. Я только что попытался сделать это удобным для пользователя, изменив курсор на указатель, когда вы находитесь над кликабельным значком. Проблема в том, что курсор изменится на указатель, однако он находится не над значком, а немного от него. Когда мышь находится над значком, указатель отсутствует.

Вот некоторые фрагменты соответствующего кода в HTML и CSS:

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, нарисованный синий прямоугольник показывает, где курсор меняется на указатель. Box displaying where cursor changes

Если бы кто-нибудь мог пролить свет на это, это было бы очень признательно, спасибо.

Редактировать ---

Кажется, что transform: translate() портится с границами для изменения указателя, есть ли способ что-то изменить, не запутавшись?

1 Ответ

0 голосов
/ 06 марта 2020

transform: translateX(12.5vh) портится там, где находится ящик ... Я переключил его на margin: 0 auto;, и он центрирован.

Codepen

...