Можно ли автоматически отображать текст при наведении курсора на мобильных устройствах?

Question

Я использую шаблон сайта в Cargo Collective.На домашней странице есть сетка изображений с текстом, который появляется только при наведении курсора.В мобильном представлении текст не отображается.Я понимаю, что hover не работает постоянно на мобильных устройствах.Есть ли способ настроить отображение этого текста при загрузке страницы на мобильном телефоне?

В качестве альтернативы, как удалить функцию наведения и чтобы текст всегда был виден?

Вот два места, где наведение появляется в 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

Вот небольшой пример, показывающий, как можно скрывать и отображать текст в зависимости от ширины области просмотра, используя media query .Аналогичный метод может быть применен к вашей проблеме, если установить свойства :hover только тогда, когда экран имеет заданную минимальную ширину.

Также обратите внимание, что это значение device-width устарело иудалены из веб-стандартов.Поэтому будьте осторожны при выборе медиа-запроса.

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

Я должен также упомянуть, что это ни в коем случае не идеальное решение.Если вы хотите быть более точным, я бы порекомендовал с использованием Javascript для определения типа устройства и изменения ваших классов с помощью Javascript.

Answer 2

Если из этой части мы можем что-то придумать.

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

Что если мы удалим .thumnails:hover и изменим непрозрачность на 1?это могло бы сработать.

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

Я надеюсь, что это работает, но у меня нет идеи о Cargo Collective.Просто используя знания CSS.

Я рекомендую вам изучить некоторые основы CSS.Это поможет вам решить эту проблему в будущем.