css - 双击以消除移动设备上的悬停效果

Question

我有以下代码，当您将鼠标悬停在图片上时，它会在图片上显示文字:

<div class="single-service-item">
  <div class="img-holder">
    <img src="http://www.titantalk.com/forums/attachment.php?attachmentid=319906&stc=1&d=1413391273" alt="Awesome Image">
    <div class="overlay">
      <div class="box">
        <div class="content">
          <p class="thm-btn yellow-bg">Lorem ipsum dolor sit amet, consectet ur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna ali qua. Ut enim ad minim.</p>
        </div>
      </div>
    </div>
  </div>
 </div>

用下面的CSS

.single-service-item {
  padding-bottom: 42px;  
}
.single-service-item .img-holder {
  display: block;
  position: relative;  
  max-height: 200px;
  overflow: hidden;
}
.single-service-item .img-holder img {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
  width: 100%;
}
.overlay {
  background-color: transparent;
  bottom: 0;
  left: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
  -webkit-transition: background-color 0.4s ease 0s;
  transition: background-color 0.4s ease 0s;
}
.overlay .box {
  border: 5px solid transparent;
  display: table;
  height: 100%;
  -webkit-transition: border-color 0.4s ease 0s;
  transition: border-color 0.4s ease 0s;
  width: 100%;  
}
.overlay .box .content {
  display: table-cell;
  text-align: center;
  vertical-align: middle;  
}
.overlay .box .content p {
  padding: 9.5px 24px;
  -webkit-transform: translate3d(0px, -75px, 0px);
  transform: translate3d(0px, -75px, 0px);
  -webkit-transition: all 0.4s ease 0s !important;
  transition: all 0.4s ease 0s !important;
  opacity: 0;
  color: #fff;
}
.single-service-item:hover .img-holder .overlay {
  background-color: rgba(1, 48, 94, 0.85);
}
.single-service-item:hover .img-holder .overlay .box {
  border-color: #fdc716;
}
.single-service-item:hover .img-holder .overlay .box .content p {
  opacity: 1;
  -webkit-transform: translate3d(0px, 0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}
.services .single-service-item:hover .img-holder img {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

这是它的一个 jsfiddle:

https://jsfiddle.net/wkof6bod/

在移动设备上，它通过点击图像来工作，但要移除悬停效果(文本)，我必须点击图像外部。

我如何才能让它在图像内部再次点击以消除悬停效果？

Answer 1

你可以通过切换假类来做到这一点

尝试运行代码片段

希望这就是你想要的!

$(document).on('click', '.single-service-item', function() { 
$(this).removeClass('single-service-item').addClass('single-service-item-nothover');
});

$(document).on('click', '.single-service-item-nothover', function() { 
    $(this).removeClass('single-service-item-nothover').addClass('single-service-item');
}); 

.single-service-item, .single-service-item-nothover {
  padding-bottom: 42px;  
}
.single-service-item .img-holder, 
.single-service-item-nothover .img-holder{
  display: block;
  position: relative;  
  max-height: 200px;
  overflow: hidden;
}
.single-service-item .img-holder img , 
.single-service-item-nothover .img-holder img{
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
  width: 100%;
}
.overlay {
  background-color: transparent;
  bottom: 0;
  left: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
  -webkit-transition: background-color 0.4s ease 0s;
  transition: background-color 0.4s ease 0s;
}
.overlay .box {
  border: 5px solid transparent;
  display: table;
  height: 100%;
  -webkit-transition: border-color 0.4s ease 0s;
  transition: border-color 0.4s ease 0s;
  width: 100%;  
}
.overlay .box .content {
  display: table-cell;
  text-align: center;
  vertical-align: middle;  
}
.overlay .box .content p {
  padding: 9.5px 24px;
  -webkit-transform: translate3d(0px, -75px, 0px);
  transform: translate3d(0px, -75px, 0px);
  -webkit-transition: all 0.4s ease 0s !important;
  transition: all 0.4s ease 0s !important;
  opacity: 0;
  color: #fff;
}
.single-service-item:hover .img-holder .overlay {
  background-color: rgba(1, 48, 94, 0.85);
}
.single-service-item:hover .img-holder .overlay .box {
  border-color: #fdc716;
}
.single-service-item:hover .img-holder .overlay .box .content p {
  opacity: 1;
  -webkit-transform: translate3d(0px, 0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}
.services .single-service-item:hover .img-holder img {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="single-service-item">
  <div class="img-holder">
    <img src="https://nidalmer.github.io/s2g/assets/images/solution-single/solution-v1-2.jpg" alt="Awesome Image">
    <div class="overlay">
      <div class="box">
        <div class="content">
          <p class="thm-btn yellow-bg">Lorem ipsum dolor sit amet, consectet ur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna ali qua. Ut enim ad minim.</p>
        </div>
      </div>
    </div>
  </div>
 </div>