css 如果是移动的，则反转效果

mzaanser 于 2023-10-21 发布在其他

关注(0)|答案(1)|浏览(77)

目前，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样式表？

css

来源：https://stackoverflow.com/questions/77302685/invert-effect-if-it-is-mobile

1条答案

按热度按时间

iyr7buue1#

您可以使用the hover CSS media feature仅针对具有鼠标悬停的设备。并仅将灰度应用于这些设备。
你的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功能现在已得到广泛支持，see canIuse

赞(0）回复(0）举报 2023-10-21

我来回答

css 如果是移动的，则反转效果

1条答案

相关问题

热门标签

最新问答