移动鼠标悬停

Question

我的响应式网站桌面显示屏有一个图像网格，当鼠标悬停时，图像网格会变暗并显示标题，但是在移动显示屏上，当页面加载时，悬停状态会永久显示。如何允许它在桌面视图上运行但在移动设备上禁用它？问题是移动版本上的图像呈灰色，并且与桌面版本相比显得有点暗淡。

我已经爬过CSS试图找到定义悬停状态的相关最大宽度，但说实话我不确定我在做什么。

这是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 {
    opacity: 1;
    background: rgba(237, 235, 232, 0.7);
  }
}
.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;
}
@media screen and (max-width: 768px) {
  .work .work-grid .inner .desc .cat {
    color: #333333;
  }
}
.work:hover .inner, .work:focus .inner {
  opacity: 1;
}
.work:hover .desc h3 a, .work:focus .desc h3 a {
  color: #cabcab;
}

和 HTML：

<div class="col-md-4 text-center animate-box">
<a class="work" href="portfolio_detail_holsten.html">
<div class="work-grid" style="background-image:url(images/project-11.jpg); border: 2px solid #fff;">
<div class="inner">
<div class="desc">
<h3>Holsten Brewery</h3>
</div>
</div>
</div>
</a>
</div>

<!-- jQuery -->
<script src="js/jquery.min.js"></script>
<!-- jQuery Easing -->
<script src="js/jquery.easing.1.3.js"></script>
<!-- Bootstrap -->
<script src="js/bootstrap.min.js"></script>
<!-- Waypoints -->
<script src="js/jquery.waypoints.min.js"></script>
<!-- Main -->
<script src="js/main.js"></script>

Answer 1

这是你的悬停效果：

.work:hover .inner, .work:focus .inner {
  opacity: 1;
}

这就是为小屏幕（例如移动设备）设置相同样式规则的原因：

@media screen and (max-width: 768px) {
  .work .work-grid .inner {
    opacity: 1;
    background: rgba(237, 235, 232, 0.7);
  }
}

如果您想删除小屏幕的

opacity

样式，请将其删除：

@media screen and (max-width: 768px) {
  .work .work-grid .inner {
    background: rgba(237, 235, 232, 0.7);
  }
}

（和/或在

max-width: 768px

对屏幕进行任何其他您喜欢的样式更改）