CSS 样式表反转效果（如果是移动设备）

Question

目前，wordpress 样式表对图像有此效果。

}
.course-hover .x-bg>.x-bg-layer-lower-image {
    filter: grayscale(1);
    transition: all .3s ease-in-out
}
.course-hover:hover .x-bg>.x-bg-layer-lower-image {
    filter: grayscale(0);
    transition: all .3s ease-in-out
}

这正是我们想要的桌面视图，但是在移动设备上它使图像始终保持灰度，有没有办法让移动设备不应用灰度？

在另一篇文章中我确实看到了。

@media only screen and (max-width: 500px) {
  body {
    background-color: red;
    overflow-y: hidden;
  }
}

但我不确定这是否适用于 WordPress 样式表。

Answer 1

您可以使用悬停CSS媒体功能来仅定位具有鼠标悬停功能的设备。并仅将灰度应用于这些设备。

你的CSS应该是这样的：

@media (hover: none) {
  /* when hover is NOT supported */
  .course-hover .x-bg>.x-bg-layer-lower-image {
    filter: grayscale(1);
    transition: all .3s ease-in-out
  }
  .course-hover:hover .x-bg>.x-bg-layer-lower-image {
    filter: grayscale(0);
    transition: all .3s ease-in-out
  } 
}

此 CSS 功能现已得到广泛支持，参见 canIuse