Question

要预先说明，我是一名初学者。我需要关闭移动设备图像上的悬停功能，因为当有人向下滚动页面时会出现问题。我让一个程序员在upwork.com上做了这件事，他成功地通过CSS为主页图片做了这个。

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

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

该页面为foxandowlkids.com/index_postlaunch.html

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

非常感谢任何帮助！

Answer 1

在该特定网站上，诀窍似乎是在<html>元素中寻找该类。在普通屏幕上，它有类.no-mobile。对于移动设备，这将更改为.mobile。

浏览css并查找这样的内容：a悬停状态：

.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-mobile选择器。这将让您只定位不被视为“移动”的屏幕。修改后的代码可能如下所示：

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);
    }
}

Answer 2

3478中的行3460和/www/css/style.css正在产生效果。要禁用它，您可以在@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);
  }
}

但是，我推荐第二个选项，将你的mod放在一个不同的样式表中，在style.css之后加载，因为在主题更新时，style.css的mods会丢失，（除非你使用的是子主题），似乎并非如此）。所以这里是更安全的路线，放在你自己的样式表中：

@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个或更多开发人员，与您没有任何工作关系并查看答案。

CSS悬停在移动设备上

2 个答案: