首先声明，我是一名初级程序员。 我需要关闭移动设备图像上的悬停功能，因为当有人向下滚动页面时，它会产生问题。 我请一位程序员在 upwork.com 上做，他通过CSS成功地完成了主页图像。
但是，我现在在不同的部分下添加了一些新图像，这些新图像已启用。 不幸的是，我使用的程序员不想分享他是如何做到的，而是希望我们再次雇用他。
我认为最好自己弄清楚如何做到这一点。
该页面已 foxandowlkids.com/index_postlaunch.html
您将看到"功能"图像已悬停在笔记本电脑上，但在移动设备上关闭。 如何使用我的"多功能性"图像实现此目的？ 老实说，甚至不确定我应该查看哪个CSS文件。
任何帮助将不胜感激！
/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之后加载，因为样式的模组.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。
但是，请注意，在生产中允许非限定代码始终是一个坏主意，因为在不知不觉中破坏事物的可能性很大。作为一般规则，为这么小的东西支付几美元总是值得在不同的屏幕尺寸或不同的设备上破坏它的风险，这是相当高的，除非您了解您的代码更改了什么，何时应用以及如何测试它。
在测试环境中随心所欲地玩游戏，并用它来学习。但是，如果您在客户面前关心您的网站和品牌形象，请不要更改您在生产中不了解的内容，无论是CSS、javascript还是php。这不是你是否会打破它的问题，而是什么时候打破它的问题。不要相信我的话。询问您选择的任何 10 个或更多开发人员，与您没有任何工作关系，看看答案。
在该特定站点上，诀窍似乎是在<html>元素中查找该类。在普通屏幕上，它具有 .no-mobile 类。对于移动设备，此更改为 .mobile。
浏览 css 并查找类似以下内容，其中存在 ：hover 状态：
.work-item:hover .work-img > img {
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-o-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05);
}
修改它，以便在所有内容前面都有一个 html.no 移动选择器。这样，您就可以仅定位不被视为"移动"的屏幕。修改后的代码可能如下所示：
html.no-mobile .work-item:hover .work-img > img {
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-o-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05);
}
请注意，这仅适用于您的情况，因为显然某处有一个脚本正在检查用户正在使用的设备类型并更新 html 类，您可以利用该类。
使用纯 CSS，您需要编写媒体查询并定位特定的设备宽度。重写效果可能如下所示，仅针对屏幕尺寸为 768px 或更大的设备：
@media (min-width: 768px) {
.work-item:hover .work-img > img {
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-o-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05);
}
}