移动端的 CSS 移除效果答案

【问题标题】：CSS remove effect for mobile移动端的 CSS 移除效果
【发布时间】：2015-11-18 13:20:48
【问题描述】：

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

我想让移动用户或仅使用触控设备的人永久使用此功能。

是否可以根据用户的屏幕尺寸动态更改 a) 和 b)？

layout-caption-overlay-hover

与

layout-caption-overlay

【问题讨论】：

标签： html css mobile hover overlay

【解决方案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 */
    }
}

【讨论】：

感谢您的回复。我想为小屏幕尺寸禁用悬停，而不是为不同的屏幕尺寸设置不同的覆盖样式。这在 CSS 中可行吗？
您不能禁用“悬停”事件。但是，您可以在悬停时使用媒体查询为每个不同的屏幕尺寸应用不同的样式。
你能固定悬停吗？
谢谢顺便说一句，这绝对让我可以选择使用不透明度禁用它。

【解决方案2】：

谢谢巴斯蒂安，

经过大量研究，我并没有完全找到我正在寻找的答案，但我确实找到了解决方法，部分基于您的建议。我希望这对某个阶段的人有所帮助。顺便说一句，我正在使用 squarespace。

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

使用 @media only screen and (min-width: 640px)
我设置了两条指令。

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

b) 当屏幕尺寸低于 640 像素时，隐藏位于图像/叠加层下方的文本框。我已将叠加层上显示的文本复制并粘贴到其中。

@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 */

上面的代码针对 640 像素以上的屏幕，我需要将不透明度设置为 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

【讨论】：