CODEWITHSUNDEEP
htmlcsshovertouch
KP83
KP83

Reputation: 646

How to make hover state display: none; work on touch / mobile devices

How to make hover state display: none; work on touch / mobile devices: I have a simple hover state that shows two links on hover. I was wondering how to make this work on touch devices? Do you need javascript for this or can it be done through 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>

Upvotes: 1

Views: 246

Answers (1)

Mihey Egoroff
Mihey Egoroff

Reputation: 1542

CSS cannot provide a solid solution, but you can try adding :focus and :active states.

Javascript can help you handle touch events, like touchstart

Jquery library can make it even easier.

Upvotes: 1

Related Questions