Почему эти кнопки не отменяются после нажатия на мобильные телефоны, но работают правильно на рабочем столе?

Question

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

Один интересный момент.Кнопка Uber на самом деле является ссылкой, тогда как остальные s.

Вот развернутое приложение (финальный проект для bootcamp): https://sipspot.herokuapp.com/

Вот репозиторий github: https://github.com/charlesmbrady/Project3

Пожалуйста, дайте мне знать, если у вас есть идеи.Заранее спасибо!

Вот соответствующий код с соответствующим CSS под ним:

        <div className="bottombar">
          { this.state.theCheckinLatitude === 0 ? (
            <button className="cntrl-btn" data-test="controls-checkin" onClick={ this.checkIn }>CheckIn</button>
          ) : (
              <button className="cntrl-btn" data-test="controls-checkin" onClick={ this.checkOut }>ChkOut</button>
            ) }
          <button className="cntrl-btn" data-test="controls-drink" onClick={ this.drinkTracker }>+Drink</button>
          <a id="uber-button" className="cntrl-btn" data-test="controls-uber" href="https://m.uber.com/ul/?action=setPickup&pickup=my_location" target="_blank" rel="noopener noreferrer">Uber</a>
          <button id="friends-button" className="cntrl-btn" data-test="controls-friends" onClick={ this.contactFriends }>Friends</button>
        </div>

CSS для соответствующих элементов.Предметы display: - это единственные биты, которые, я могу себе представить, будут иметь какое-либо влияние на эту проблему.

.topbar>a, .topbar>button, .bottombar>a, .bottombar>button {
  background-color: #121212;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  display: inline-block;
  display: -moz-inline-box;
  width: 25%;
  padding: 10px;
}

Answer 1

Это решение очень простое и отлично работает.Поместите следующий медиазапрос в свой CSS, чтобы показать эффекты наведения на устройствах, которые поддерживают наведение (обычно это ноутбуки / настольные компьютеры).«Сенсорные» устройства, такие как мобильные телефоны, не увидят этот CSS и не будут отключены.Сенсорные устройства плохо работают, и это, в конечном счете, и стало причиной появления «прилипания кнопок».

@media (hover: hover) {
    /* code for devices that *support* hover (not mobiles) */
}