Question

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

Answer 1

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

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

如果我们删除.thumnails:hover并将不透明度更改为1怎么办？它可能会解决问题。

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

我希望这行得通，但我对货运集体一无所知。仅使用CSS知识。

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

Answer 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修改您的类。

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

2 个答案: