Popup em CSS, sem Javascript

Faça uma pergunta
Popup em CSS, sem Javascript

Eis como realizar uma popup de informação em puro CSS, sem Javascript.


A dica é para utilizar :hover para servir-se de diferentes CSS na passagem do cursor.
Entre os atributos modificados, utiliza-se display:none para mascarar/afixar a popup dependendo de onde se encontrar o cursor : em cima ou não.

Uma popup em um link



O conteúdo da popup será colocado em uma baliza <span> no interior da baliza <a>


Eis o código CSS, para colocar na <head> de seu arquivo html ou no arquivo CSS a parte:


a.info
{
Position: relative;
z-index:24; background-color:#ddd;
color:#000;
text-decoration:none
}

a.info:hover {z-index:25; background-color:#ff0}

a.info span{display: none}

a.info:hover span
{
display:block;
position:absolute;
top:2em; left:2em; width:10em;
border:1px solid #0cf;
background-color:#555; color:#fff;
}


Olhe ai o código HTML, para inserir diretamente na sua página:


Eis um link para <a class="info" href="http://ccm.net/ http://ccm.net]">CCM<span> Comunidade de assistência e de conselho high tech</span></a>.


Olhe o resultado:

Sem o cursor:


Com o cursor em cima:

Uma popup sem link

Se você quer somente uma popup sem link, você poderá colocar href="#" na sua baliza <a>, mas certos navegadores consideram que "#" no link é no alto da página, o que causa alguns momentos desagradáveis durante a navegação.

Para resolver isto, substitua a baliza <a> por uma baliza <span> (em HTML e em CSS). Isto funciona assim.
  • Nota : com a baliza <span>, você não tem a pequena mão da seta basta modificar o CSS : CSS :


span.info  
{
position:relative;
z-index:24; background-color:#ddd;
color:#000;
cursor: seta;
}

O resultado é o mesmo, mas não tem o <a> inútil.
Jean-François Pillou

Jean-François Pillou - Fundador do CCM
Mais conhecido como Jeff, Jean-François Pillou é o fundador do CommentCaMarche.net. Ele também é CEO do CCM Benchmark e diretor digital do Grupo Figaro.

Mais informações sobre a equipe do CCM

Veja também