启用 hover 以在移动设备上进行触摸/点击

Question

Everything works the way it should on desktop view but the DIV which shows on hover in desktop doesn't show in mobile view. I want to show that DIV on touch/click in mobile/tablet.

As per some suggestions, I tried with :active after :hover too but that doesn't work.

I don't mind JS or jQuery answers too.

DEMO: https://jsfiddle.net/ovg6xzhu/

HTML:

<div class="hoverEffect hoverEffect-first">
  <img src="https://via.placeholder.com/150" />
  <div class="mask">
    <h2>Web Services!</h2>
    <p>We are going to build another sets of css hover image effects with CSS3 animations.<br /><a href="#">View All</a></p>
  </div>
</div>

CSS:

.hoverEffect {
  width: 100%;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;
  border-radius: 2px;
  margin-bottom: 30px;
}
.hoverEffect .mask {
  width: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0
}
.hoverEffect img {
  display: block;
  position: relative
}
.hoverEffect h2 {
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  position: relative;
  padding: 10px;
  margin: 20px 0 0 0
}
.hoverEffect p {
  position: relative;
  color: #fff;
  padding: 0px 20px 20px;
  text-align: center
}
.hoverEffect-first img {
  transition: all 0.2s linear;
  width:100%;
  height:auto;
}
.hoverEffect-first .mask {
  opacity: 0;
  background-color: rgba(61, 90, 128, 0.95);
  transition: all 0.4s ease-in-out;
  width: 100%;
  height: 100%;
}
.hoverEffect-first h2 {
  margin: 10px 40px;
  transform: translateY(-100px);
  opacity: 0;
  transition: all 0.2s ease-in-out;
}
.hoverEffect-first p {
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.2s linear;
}
.hoverEffect-first:hover img, .hoverEffect-first:active img {
  transform: scale(1.1);
}
.hoverEffect-first:hover .mask, .hoverEffect-first:active .mask {
  opacity: 1;
}
.hoverEffect-first:hover h2,
.hoverEffect-first:hover p,
.hoverEffect-first:active h2,
.hoverEffect-first:active p {
  opacity: 1;
  transform: translateY(0px);
}
.hoverEffect-first:hover p, .hoverEffect-first:active p {
  transition-delay: 0.1s;
}
.hoverEffect-first:hover a.info, .hoverEffect-first:active a.info {
  transition-delay: 0.2s;
}

Answer 1

Your code is working. Always make sure to clear your browser cache. A quick trick to do this on mobile would be to add " /?random " at the end of your url to get a fresh load. Make sure to change " random " to anything you wish per refresh so it keeps sending you a fresh load. That said I would also have to agree with ehab's answer, it's not very intuitive to show/hide your content upon hovering on mobile. Add visual indicators like a button or let the animation take place naturally when it enters the viewport.

Answer 2

You dont need js for this purpose: css should be enough, and active should do the job, The code you posted is working fine - maybe u had a cache problem. That being said its not the best experience for mobile users, you should not emulate hover effects on mobile, users wont expect they need to click ( and then they are expected to click on another element to make the effect go away).