Ошибка с эмодзи в топовых избранных работах

Внести вклад Ошибка
1

Привет, здесь Сергей :slight_smile:

Это немного старая ошибка, но всё же:

Когда я просматривал форум Blenderartists, я заметил небольшую ошибку: в верхней части сайта есть секция, где отображаются 6 лучших работ. При наведении курсора на одну из них появляется заголовок. Однако я обнаружил, что если заголовок содержит эмодзи (как показано на скриншоте ниже), он остаётся видимым даже без наведения курсора.

174×188 46.9 KB

Я провёл небольшое расследование и пришёл к следующим CSS-правилам, которые могут помочь решить эту проблему.

Дело в том, что у заголовков этих изображений в строке с избранными темами есть такие правила:

.featured-topic h3 a {
    font-size: 14px;
    color: transparent;
    transition: color .6s,text-shadow .6s
}

Я не думаю, что свойство “color: transparent” является правильным решением. Именно поэтому оно влияет только на текст, но не на сам эмодзи, так как эмодзи обернут в тег “img”.

Поэтому, на мой взгляд, лучше удалить “color: transparent” и сделать что-то вроде этого:

.featured-topic h3 {
    position: absolute;
    top: 0;
    padding-top: 0;
    left: 5%;
    width: 90%;
    text-align: left;
    visibility: hidden;
}

.featured-topic:hover h3 {
    visibility: visible;
}

Таким образом, итоговый код будет выглядеть так:

image
image458×363 10.6 KB

Надеюсь, это поможет :slight_smile:

3

Привет, Сергей!

Спасибо за отчёт. Возможно, я ошибаюсь, но это не похоже на CSS по умолчанию для компонента Homepage Feature :thinking:. Судя по всему, это ваши кастомизации. :smile:

4 лайка
4

Привет, @Arkshine!

Извините, я не знал об этом, я думал, что это функция Discourse. Прошу прощения :slight_smile:

1 лайк
5

Пожалуйста, сообщите об этом вашим администраторам, спасибо!

Закрываю эту тему.

1 лайк
6

Эта тема была автоматически закрыта через 13 часов. Новые ответы больше не принимаются.