Question

为什么单击手机后未取消选择此应用程序底部的四个按钮？它们可以在桌面上正常工作。我一直在努力寻找解决方案。

一个有趣的观点。优步按钮实际上是一个链接，而其余按钮是s。

这是已部署的应用程序（用于训练营的最终项目）： 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) */
}

为什么在单击手机后未取消选择这些按钮，但在台式机上正常工作？

1 个答案: