Как нажать скрытую кнопку для фреймворка Atata? - PullRequest
Новая
       33

Как нажать скрытую кнопку для фреймворка Atata?

0 голосов
/ 29 июня 2018

Есть нажимаемая кнопка, которая скрыта в части проекта, который я делаю. Это становится видимым, когда мышь находится над ним. Я хочу нажать на скрытую кнопку. Я попробовал большинство методов, написанных на веб-сайте, но у меня ничего не получилось. У вас есть предложения? 

<div class="btn-group" style="visibility: hidden;">
  <a class="btn btn-xs" title="Add" onclick="AddAction()">
    <i clas="fa fa-plus-circle test-success"> == $0
      ::before
    </i>
  </a>
</div>

1 Ответ

0 голосов
/ 29 июня 2018

Итак, хотя вы используете visibility: hidden, я бы порекомендовал использовать opacity. Это все еще скрывает кнопку, как и следовало ожидать. Не стесняйтесь заглянуть на веб-сайт W3 Schools . У него много отличных ресурсов, которые охватывают простые вещи, подобные этой.

Я использовал следующие ссылки с этого сайта:

Событие onclick

Событие onmouseover

Событие onmouseout

свойство непрозрачности 

function OnHover(element) {
      element.style.opacity = 100;
    }
    function OnExit(element) {
      element.style.opacity = 0;
    }
    function OnClick(element) {
      element.innerHTML = "You clicked me as a hidden button!";
      element.style.color = "red";
    }
.btn {
  visibility: hidden;
}
.btn:hover {
  visibility: visible !important;
}
<button id="btnO" onmouseover="OnHover(this)" onmouseout="OnExit(this)" onclick="OnClick(this)" style="opacity: 0;">Opacity</button>
<button id="btnV" onclick="OnClick(this)" class="btn">Visibility</button>

Я полагаю, что поскольку в вашем сценарии visibility было установлено значение hidden, страница не запускает события, связанные с элементом. Это свойство влияет даже на CSS-селекторы , например hover. Похоже, что он не уменьшает размер элемента, так как изменение visibility элемента с помощью инструментов разработчика в режиме реального времени не влияет на макет страницы. Однако opacity просто уменьшает альфа-канал на элементе, и все события по-прежнему запускаются как обычно.

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

Подсказка: скрытые элементы занимают место на странице. Используйте свойство display, чтобы скрыть и удалить элемент из макета документа!

Что касается приведенной выше цитаты из W3 Schools, вы можете создать пустой элемент div, в котором находится ваша кнопка. Затем, когда пользователь наводит курсор на элемент div, отобразите кнопку или вызовите функцию javascript из события onclick. В этом случае вы можете использовать свойство visibility, так как вы не будете напрямую взаимодействовать с кнопкой, а вместо этого div.

...