时间戳

首页 > 解决方案 > 可以在移动设备上自动显示悬停文本吗？

css - 可以在移动设备上自动显示悬停文本吗？

问题描述

我在 Cargo Collective 上使用网站模板。在主页上，有一个带有仅在悬停时出现的文本的图像网格。在移动视图中，文本不会出现。我了解悬停在移动设备上无法始终如一地工作。有没有办法设置在移动设备上加载页面时显示此文本？

或者，我将如何删除悬停功能并使文本始终可见？

这是 CSS 中出现悬停的两个位置：

[data-predefined-style="true"] bodycopy a:hover {

}

bodycopy a.image-link,
bodycopy a.icon-link,
bodycopy a.image-link:hover,
bodycopy a.icon-link:hover {
	border-bottom: 0;
	padding-bottom: 0;
}

/**
 * Thumbnail Hover
 */

.thumbnails .thumbnail > a {
	position: relative;
}

.thumbnails .thumbnail .title {
	background: rgba(0, 0, 0, 0.4);
    padding: 0.5rem 1.2rem 0.7rem 1.2rem;
    margin: 2.4rem;
    color: rgba(255, 255, 255, 1);
    align-content: center;
    display: flex;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 9;
    opacity: 0;
}

.thumbnails .title span {
	margin: auto;
	display: inline-block;
}

.thumbnails .thumbnail:hover .title {
    opacity: 1;
}

body.mobile .thumbnails .thumbnail:hover .title {
	opacity: 0;
}

标签： cssmobiletexthover

解决方案

如果这部分我们可以弥补。

body.mobile .thumbnails .thumbnail:hover .title {
opacity: 0;
}

如果我们移除.thumnails:hover并将不透明度更改为 1 会怎样？它可能会奏效。

body.mobile .thumbnails .title {
opacity: 1;
}

我希望这可行，但我对 Cargo Collective 没有任何想法。只是使用 css 知识。

我建议你学习一些 CSS 基础知识。这将帮助您在将来解决此类问题。

推荐阅读