Efeito :hover em blocos de texto com CSS
Postado por: Pedro Rogério em
As listas HTML são de fácil utilização devido a sua flexibilidade. São muito utilizadas para o desenvolvimento de menus, mas nesse tutorial, baseado no original do site Smiley Cat vamos aprender a desenvolver um bloco de texto com efeito :hover com a utilização de listas e CSS. O HTML é muito simples, e se resume no seguinte:
<div id="links">
<ul>
<li>
<a href="#" title="Título do post">
Título do post
<em>Descrição do post.</em>
<span>Data</span>
</a>
</li>
<li>
<a href="#" title="Título do post">
Título do post
<em>Descrição do post.</em>
<span>Data</span>
</a>
</li>
</ul>
</div>
Agora vamos ao CSS. Para que nosso exemplo funcione corretamente no IE6, devemos especificar que a largura do nosso link seja igual a largura da lista. Caso contrário o efeito :hover só acontecerá sobre os itens da lista, e não no bloco todo:
#links ul {
list-style-type:none;
margin:0;
padding:0;
width:400px;
}
#links li {
border:1px dotted #999;
border-width:1px 0;
margin:5px 0;
}
#links li a {
color:#990000;
display:block;
font:bold 14px Arial, Helvetica, sans-serif;
padding:5px;
text-decoration:none;
}
* html #links li a {width:400px;} /*Necessario para que funcione no IE6*/
#links li a:hover {
background-color:#ffffcc;
}
#links a em {
color:#333;
display:block;
font:normal 11px Verdana, Arial, Helvetica, sans-serif;
line-height:125%;
}
#links a span {
color:#125F15;
font:normal 9px Verdana, Arial, Helvetica, sans-serif;
line-height:150%;
}
Vocês podem ver aqui nesse exemplo o código em ação.
Sobre Pedro Rogério
Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o Pinceladas da Web também escreve para o CSS no Lanche, blog voltado ao desenvolvimento front-end.
Muito bom, mas vou tirar a linha do css para o IE 6 =)
@Neto,
Eu ia tirar, mas fiquei com dó de quem utiliza o IE6.
Agora sim! Estava procurando uma solução para funcionar no IE6 faz tempo! Muito obrigado Pedro!
Hey! Não uso o IE6 e não recomendo a ninguém, mas meus clientes e os clientes de meus clientes usam =/
Boa! O efeito :hover pode ser usado em qualquer elmento, exemplo div:hover… Pena que o IE 6 não (claro).
Viva os padrões!
Esses dias eu vi isso em site em um bloco de noticias, achei bizarro ele usar uma marcação de lista, mas pensando bem, isso é perfeitamente aceitavel, já que é uma lista né…..derrrrr rsrsrsrs
@ a todos: Morte ao IE6!!!!!
Vlw pelo post muito interessante
Gostei do efeito, obrigado por divulgar.
Quanto ao :hover, ainda não tive tempo de testar, mas acredito ser possível uma solução alternativa para o IE6, sem declarar larguras em pixels.
Estou falando do Suckerfish :hover de Patrick Griffiths e Dan Webb. Aqui está o link se alguém quiser testar antes de mim:
http://htmldog.com/articles/suckerfish/hover/
Bem legal o efeito, vou fazer uns testes com ele aqui. Só tenho uma sugestão: escolhe uma outra cor para o exemplo, quase não percebi a diferença na cor do fundo, tá muito sutil. Pra quem tem monitor LCD (que deixa tudo mais claro) tem que se esforçar para ver o efeito.
Até
Bacana. Porém não funciona no IE8.
@Rodrigo,
Pelo contrário, só se seu IE8 regrediu e virou um IE3 da vida. Funciona normalmente nele.
Bom efeito, porém uma correção quanto a língua portuguesa, o correto é iNcompatibilidade!
Olá. Meu IE8 não virou IE3.
Eu estava usano o IE8 (sem a atualização) do Windows 7.
Portanto, refaço o comentário:
Bacana. E funciona legal no IE8.
//Digitei errado: usano = usando
Interessante,pelo que entendi ele usou line-height ao invés de usar posicionamento,to certo?!
@Allan,
line-height tem a função de aumentar a altura da linha, o que foi feito nesse post.
Uma dica simples, que é bastante eficiente.
Parabens muito bom , amigo me tira uma duvida porque foi usado display:block? porque a span são inline? valeu
@Jardel,
display:block foi utilizado para que o link ocupasse toda a área do bloco. No HTML existem elementos a nível de bloco e inline, span é um elemento inline, você pode ver mais sobre isso aqui:
http://www.cssnolanche.com.br/diferenca-entre-elementos-inline-e-de-bloco-em-html/
Olá, eu queria fazer um menu horizontal com imagem e com efeito hover, como faço? Existe algum tutorial pra esse assunto
parabéns pelo blog!
Dê uma olhada nesse tutorial:
http://www.portugal-a-programar.org/forum/index.php?topic=36210.0
Oi Pedro. Eu gostaria de saber porque ao transformar a tag “a”, que é inline, em bloco, dentro de uma lista desordenada, não se cria um espaço antes e depois.
Valeu.
André,
Tags de bloco ocupam todo o espaço disponível.