CSS移动端移除效果

Question

我有一种悬停效果悬停在带有一些标题的图片上。

我想让这个永久的移动用户，或使用触摸设备的人。

可以根据用户的屏幕尺寸动态地改变a)和b)吗？

layout-caption-overlay-hover

使用

layout-caption-overlay

Answer 1

您可以使用@media css规则

http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

@media screen and (max-width: 480px) {

    /* Style for the mobile */
    .layout-caption-overlay {
        /* style of your layout-caption-overlay-hover style */
    }
}

Answer 2

谢谢巴斯蒂安

经过大量的研究，我没有找到我正在寻找的答案，但我确实找到了一个工作，部分基于您的建议。我希望这能在某个阶段对某些人有所帮助。我正在使用squarespace btw。

注:我完全是一个CSS新手，所以可以有一个更简单的方法来实现这一点，但是这对我来说是有效的。欢迎其他建议和建设性的批评。

使用@media only screen and (min-width: 640px)

我设置了两个指令。

a)当屏幕尺寸大于640px时，将悬停图层的不透明度设置为.85

b)当屏幕尺寸低于640px时，隐藏位于图像/覆盖图下的文本框。我已经复制并粘贴了出现在覆盖上的文本到这个。

@media screen and (min-width:640px) /* do the action below until screen with goes below 640px */

{.sqs-block-image .image-block-outer-wrapper.layout-caption-overlay .intrinsic .image-caption-wrapper,
.sqs-block-image .image-block-outer-wrapper.layout-caption-overlay-hover .intrinsic .image-caption-wrapper 
{opacity: .85!important;}  /* Make overlay opacity 0.85 */
#block-yui_3_17_2_2_1447934533987_10333  /* Target this specific block*/
        {display:none;}  /* Keep this block hidden until screen goes below 640px */

上面的代码将640px以上的屏幕设置为我需要将不透明度设置为0的所有其他内容。这还会设置覆盖的背景颜色：

#innovation2015 /* Targeting the specific section/page in my homepage */

{
.sqs-block-image .image-block-outer-wrapper.layout-caption-overlay .intrinsic .image-caption-wrapper,
.sqs-block-image .image-block-outer-wrapper.layout-caption-overlay-hover .intrinsic .image-caption-wrapper 
{background-color: rgb(10,148,214); /* Sets background colour of overlay */
 opacity: 0;}
}

最后，你可以使用这个令人惊叹的Chrome插件来识别单独的Squarespace区块编号：

空间集合/数据块标识符：https://chrome.google.com/webstore/detail/squarespace-collectionblo/bggpdfnccodbnmcndckmeehdjkjojkde