Popup em CSS, sem Javascript

Janeiro 2017

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://commentcamarche.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.


(Dica de origem: http://psacake.com/web/jl.asp )


Veja também

Artigo original publicado por . Tradução feita por ninha25. Última modificação: 29 de abril de 2010 às 02:39 por ninha25.
Este documento, intitulado 'Popup em CSS, sem Javascript', está disponível sob a licença Creative Commons. Você pode copiar e/ou modificar o conteúdo desta página com base nas condições estipuladas pela licença. Não se esqueça de creditar o CCM (br.ccm.net) ao utilizar este artigo.