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

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

<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库可以使它变得更容易。