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

Question

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

<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>

Answer 1

Итак, хотя вы используете 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>

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

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

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

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