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

【问题标题】：Can hover text be displayed automatically on mobile devices?可以在移动设备上自动显示悬停文本吗？
【发布时间】：2018-09-26 18:33:36
【问题描述】：

我在 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;
}

【问题讨论】：

您可能想要使用媒体查询。使用此方法，您可以根据给定的屏幕尺寸将文本设置为可见/隐藏。 stackoverflow.com/questions/42025632/…

标签： css mobile text hover

【解决方案1】：

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

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

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

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

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

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

【讨论】：

【解决方案2】：

这是一个小示例，展示了如何使用 media queries 根据视口的宽度隐藏和显示文本。仅当屏幕具有给定的最小宽度时才设置:hover 属性，可以将类似的方法应用于您的问题。

另请注意，device-width 已被贬低并从 Web 标准中删除。所以在选择媒体查询时要小心。

/* General styles */

p {
  transition: opacity 0.3s;
}

/* Small styles */

.large {
  opacity: 0;
}

.small {
  opacity: 1;
}

/* Large styles */

@media only screen and (min-width: 640px) {
  .large {
    opacity: 1;
  }
  
  .small {
    opacity: 0;
  }
}

<p class="large">I'm visible when the screen is large!</p>
<p class="small">I'm visible when the screen is small!</p>

我还应该提到，这绝不是一个完美的解决方案。如果您想更准确，我建议using Javascript 检测设备类型并通过 Javascript 修改您的类。

【讨论】：