如何使悬停状态显示：无；在触摸/移动设备上工作

Question

如何使悬停状态display: none; 在触摸/移动设备上工作： 我有一个简单的悬停状态，在悬停时显示两个链接。我想知道如何在触摸设备上进行这项工作？你需要 javascript 还是可以通过 CSS 来完成？

CSS

.share-btn {
  display: inline-block;
  position: relative;
  font-size: 16px;
  text-transform: uppercase;
  text-align: center;
  width: auto;
  padding: 0 5px;
  cursor: pointer;
}

.share-btn a:link,
.share-btn a:visited {
  color: #999999;
}

.share-btn a:hover,
.share-btn a:focus {
  color: white;
 }

.share-btn .facebook-share,
.share-btn .twitter-share {
  display: none;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.share-btn .facebook-share {
  margin-left: 10px;
}

.share-btn:hover span {
  display: none;
}

.share-btn:hover .facebook-share {
  display: inline-block;
}

.share-btn:hover .twitter-share {
  display: inline-block;
}

HTML

<div class="share-btn"><span>share</span>
    <a href="https://twitter.com/home?status=http://.." class="twitter-share" target="_blank">Twitter</a>
    <a href="https://www.facebook.com/sharer/sharer.php?u=http://.." class="facebook-share" target="_blank">Facebook</a>
</div>

Answer 1

CSS 无法提供可靠的解决方案，但您可以尝试添加 :focus 和 :active 状态。

Javascript可以帮你处理触摸事件，比如touchstart

Jquery 库可以让它变得更简单。