Bom dia!
Pessoal, a situação é a seguinte:
Criando um site para minha empresa, depois de algum tempo sem fazer nada voltado para web eu me deparei com o maravilhoso Html5 e o novo CSS3. Fiz efeitos parallax e várias firulas no meu site, ta ficando legal.
Mas... nem tudo são rosas, criei um css apenas para a FontAwesome, para usar os ícones em texto mesmo para independente da resolução que usar, mesmo no celular (bootstrap) ele iria ficar sem ter perigo de ser extendido ou ficar pixelizado de alguma forma.
@font-face { font-family: 'FontAwesome'; src: url('../fonts/fontawesome-webfont.eot?v=4.1.0'); src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.1.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.1.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.1.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal; } .fa { display: inline-block; font-family: FontAwesome; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .fa-info:before { content: "\f129"; }
No site funciona muito bem o código, o que eu queria era no icone de informação, quando passar o mouse em cima ele aparecer algo (uma div, uma imagem) pra colocar algumas informações (nesse caso trabalhamos com a claro e ganhamos vários premios de vendas, e gostaria de salientar isso nesse espaço).
Mas todos os exemplos que encontrei na web usam mais ou menos essa sintaxe:
#previewdaimagem{ position:absolute; border:1px solid #ccc; background:#fff; padding:5px; display:none; color:#fff; } <a href="link" class="previewdaimagem" rel="images/image.jpg"></a>
Onde class seria o css que faz ele funcionar em si. Mas eu tenho já em class a chamada do ícone do fontawesome, e se colocar display:none nela o ícone obviamente some.. e se olharem o primeiro código q eu postei vão ver que eu uso vários ícones, e fiz um código pra poder ir adicionando novos ícones conforme necessidade.
Ou seja, precisava tentar descobrir como fazer isso sem utilizar o parâmetro class dentro da sintaxe do link que é compartilhada por vários itens no site.
Agradeço desde já a ajuda!