移动设备上的 CSS 悬停

Question

预先声明，我是一名初级程序员。我需要为移动设备关闭图像上的悬停功能，因为当有人向下滚动页面时它会产生问题。我在 upwork.com 上请了一个程序员来做，他通过主页图像的 CSS 成功地完成了。

但是，我现在在不同的部分下添加了一些新图像，这些新图像已启用。不幸的是，我使用的程序员不想分享他是如何做到的，而是希望我们再次雇用他。

我认为最好自己弄清楚如何做到这一点。

页面是 foxandowlkids.com/index_poSTLaunch.html

您会看到“The Features”图像在笔记本电脑上悬停但在移动设备上关闭。我怎样才能用我的“多功能性”图像实现这一目标？老实说，我什至不确定我应该查看哪个 CSS 文件。

如有任何帮助，我们将不胜感激!

Answer 1

/www/css/style.css 中的 3478 和 3460 行导致了这种效果。要禁用它，您可以将这些声明(包括选择器)包装在 @media 查询中，或者您可以从不同的文件中覆盖它们。

要就地修改它们，您可以使用:

@media (min-width:768px) {
  .works-grid.hover-white .work-item:hover .work-img:after{
    background: rgba(250,250,250, .9);
  }
}
/* ... */
}
@media (min-width:768px) {
  .work-item:hover .work-img:after{
    background: rgba(20,20,20, .85);
  }
}

但是，我推荐第二个选项，将您的模组放在不同的样式表中，在 style.css 之后加载，因为 style.css 的模组将在主题更新时丢失，(除非您重新使用子主题，但情况似乎并非如此)。所以这是更安全的方法，将其放置在您自己的样式表中:

@media (max-width:767px) {
  .works-grid.hover-white .work-item:hover .work-img:after,
  .work-item:hover .work-img:after {
      background-color: transparent;
  }
}

如果您想在受影响的设备中包含平板电脑，您可能希望将 768px 断点换成 992px，或者换成 540px 如果您只想将更改限制在(大多数)智能手机上。

---

但是，请注意，在生产中允许使用不合格的代码总是一个坏主意，因为在不知不觉中破坏事物的可能性很大。作为一般规则，花几 block 钱买这么小的东西总比在不同的屏幕尺寸或不同的设备上破坏它的风险是值得的，除非你了解你的代码改变了什么，什么时候应用以及你如何能够测试一下。

随心所欲地在测试环境中玩，并用它来学习。但是，如果您关心您的网站和您在客户面前的品牌形象，请不要更改您在生产中不了解的内容，无论是 CSS、javascript 还是PHP。这不是是否您会打破它的问题，而是何时。不要相信我的话。询问任何 10 位或更多您选择的开发者(与您没有任何工作关系)并查看答案。