响应式网站移动端hover状态永久显示，如何仅保留桌面端hover效果？

当前网站的图片网格在桌面端表现正常——鼠标hover时图片变暗并显示标题；但在移动端，页面加载后灰化层（标题容器）就永久显示，视觉效果沉闷。问题根源是CSS中针对移动端（max-width:768px）的规则强制设置了灰化层的opacity:1，导致默认就显示。

步骤1：修改CSS，移除移动端强制显示规则 #

找到原CSS中的移动端媒体查询块，删除强制设置opacity:1的代码，让移动端灰化层默认隐藏，和桌面端一致：

/* 原移动端规则，修改后保留仅需的样式 */
@media screen and (max-width: 768px) {
  /* 移除以下两行强制显示灰化层的代码 */
  /* .work .work-grid .inner {
    opacity: 1;
    background: rgba(237, 235, 232, 0.7);
  } */
  .work .work-grid .inner .desc .cat {
    color: #333333;
  }
}

步骤2：添加移动端触摸交互（可选） #

由于移动端没有鼠标hover，需用JS模拟触摸触发灰化层的效果，在main.js中添加以下代码：

// 移动端触摸事件模拟hover效果
$('.work').on('touchstart', function() {
  $(this).addClass('hover');
}).on('touchend touchcancel', function() {
  $(this).removeClass('hover');
});

同时在CSS中补充对应触发规则：

.work.hover .inner {
  opacity: 1;
}
.work.hover .desc h3 a {
  color: #cabcab;
}

这样移动端触摸图片时会显示灰化层和标题，松开后恢复原样，与桌面端hover体验一致。

修改后的完整CSS代码 #

.work .work-grid {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
  height: 300px;
  margin-bottom: 20px;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.work .work-grid .inner {
  display: table;
  height: 300px;
  width: 100.1%;
  opacity: 0;
  background: rgba(237, 235, 232, 0.9);
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
@media screen and (max-width: 768px) {
  .work .work-grid .inner .desc .cat {
    color: #333333;
  }
}
.work .work-grid .inner .desc {
  display: table-cell;
  vertical-align: middle;
  padding: 40px;
}
.work .work-grid .inner .desc h3 {
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 5px;
  font-weight: bold;
  line-height: 24px;
}
.work .work-grid .inner .desc h3 a {
  color: #000;
}
.work .work-grid .inner .desc .cat {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.work:hover .inner, .work:focus .inner, .work.hover .inner {
  opacity: 1;
}
.work:hover .desc h3 a, .work:focus .desc h3 a, .work.hover .desc h3 a {
  color: #cabcab;
}

内容的提问来源于stack exchange，提问作者MarkieW