При наведении курсора на кнопку в течение более 2 секунд, мне нужно снова навести курсор на эту кнопку, чтобы иметь возможность нажать на нее снова - PullRequest
Новая
       25

При наведении курсора на кнопку в течение более 2 секунд, мне нужно снова навести курсор на эту кнопку, чтобы иметь возможность нажать на нее снова

0 голосов
/ 20 мая 2018

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

    .chooseFileBtn, .submitFileBtn{ /* ignore the '.submiteFileBtn' here */
    margin-top:180%;
    padding-left: 30%;
    padding-right:30%;
    padding: 10px 20px;
    border-radius: 8px;
    background-color: #E55300;
    transition: all 500ms ease;
    /*transition: all 0.5s; */
}

.chooseFileBtn:before {
    content:'';
    position:absolute;
    top:34.1%;
    left:41.1%;
    height:5.6%;
    width:0px;
    border-radius: 8px;
    background:rgba(255,255,255,0.3);
    transition: all 2s ease;
}

.chooseFileBtn:hover:before {
    width:8.72%;
}

ChooseFileBtn - это просто стандартная кнопка, она не должна относиться к решению моей проблемы, но если вы хотите, чтобы я поделился ею с вами, не стесняйтесь спрашивать.Кроме того, это написано в отдельном файле .css.Этот файл .css связан с основным файлом .html.

1 Ответ

0 голосов
/ 20 мая 2018

Вам не нужно заворачивать свой якорь в div!Вот почему ваш якорь не работает после анимации, потому что он покрывает ваш якорь.

<a class="chooseFileBtn" href="#" id="uploadLink" onClick="chooseUpload();">
    <h1 align="center" id="chooseFileBtnText">Upload file</h1>
</a>

CSS 

  .chooseFileBtn, .submitFileBtn{ /* ignore the '.submiteFileBtn' here */
    display: block;
    padding: 10px 20px;
    border-radius: 8px;
    background-color: #E55300;
    transition: all 500ms ease;
    /*transition: all 0.5s; */
}

.chooseFileBtn:before {
    content:'';
    position:absolute;
    top:0;
    left:0;
    height:50%;
    width:0px;
    border-radius: 8px;
    background:rgba(255,255,255,0.3);
    transition: all 2s ease;
}

.chooseFileBtn:hover:before {
    width:100%;
}

См. Мои фидде https://jsfiddle.net/o2gxgz9r/47362/

...