Principais trabalhos em destaque com bug de emoji

Olá, Sergey falando :slight_smile:

É um bug um pouco antigo, mas enfim:

Ao navegar no fórum Blenderartists, encontrei um pequeno bug: há uma seção no topo do site onde é possível ver 6 trabalhos em destaque. Ao passar o mouse sobre um deles, o título fica visível. O que notei é que se o título contiver um emoji (como mostrado na captura de tela abaixo), ele ainda ficará visível mesmo que você ainda não tenha passado o mouse sobre ele.


Fiz uma pequena investigação e cheguei às seguintes regras CSS que podem ajudar a resolver esse problema.

A questão é que o título das imagens da linha de destaque tem as seguintes regras:

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

Não acho que “color: transparent” seja a maneira correta de fazer isso. É por isso que afeta apenas o texto, mas não o emoji em si. Porque o emoji está encapsulado em uma tag “img”.

Então, acho que seria uma maneira melhor remover “color: transparent” e fazer algo como:

.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;
}

Assim, o código final ficará assim:

Espero que ajude :slight_smile:

Olá Sergey!

Obrigado pelo relatório, no entanto, posso estar enganado, mas não é assim que o CSS padrão se parece no Componente de Recurso da Página Inicial :thinking:. Pelo que vejo, são suas personalizações. :smile:

4 curtidas

Oi, @Arkshine!

Desculpe, não sabia disso, pensei que fosse um recurso do Discourse. Me perdoe :slight_smile:

1 curtida

Por favor, informe seus administradores, obrigado!

Fechando este.

1 curtida

Este tópico foi fechado automaticamente após 13 horas. Novas respostas não são mais permitidas.