CSS swap hover effect
Vocês provavelmente já devem conhecer esse efeito, o de quando o usuário passa o mouse sobre alguma imagem na página e é mostrada a descrição dela, com um efeito de “swap”. Esse efeito é bem interessante para ser
utilizado em sites do tipo e-commerce. Não é muito difícil fazê-lo, só vamos ter algum trabalho para adequar o
efeito ao Internet Explorer 6, que não interpreta corretamente o efeito
:hover.
Para chegar a esse efeito, cada bloco de imagem deverá conter a seguinte marcação HTML:
<a class="show" href="#" title="Livro Ajax com jQuery"><img src="images/livro-ajax-com-jquery.jpg" alt="Livro Ajax com jQuery" /></a><br /><div class="hide"><br /> <a href="#">Livro Ajax com jQuery</a><br /> <p>Requisições Ajax com a simplicidade da jQuery</p><br /></div>Como pode ver no código acima, a miniatura da imagem fica dentro de
um link com a class=”show” e depois criamos mais uma div que irá conter
a descrição da imagem. Ela será revelada somente quando o usuário
passar o mouse sob o thumbnail da imagem. Para que você possa
manipular melhor os elementos na página, aconselho você a utilizar
listas desordenadas para conter essa marcação:
<ul id="work"><br /> <li><br /> <a class="show" href="#" title="Livro Ajax com jQuery"><img src="images/livro-ajax-com-jquery.jpg" alt="Livro Ajax com jQuery" /></a><br /> <div class="hide"><br /> <a href="#">Livro Ajax com jQuery</a><br /> <p>Requisições Ajax com a simplicidade da jQuery</p><br /> </div><br /> </li><br /><br /> <li><br /> <a class="show" href="#" title="Livro Ajax com jQuery"><img src="images/livro-ajax-com-jquery.jpg" alt="Livro Ajax com jQuery" /></a><br /> <div class="hide"><br /> <a href="#">Livro Ajax com jQuery</a><br /> <p>Requisições Ajax com a simplicidade da jQuery</p><br /> </div><br /> </li><br /><br /> <li><br /> <a class="show" href="#" title="Livro Ajax com jQuery"><img src="images/livro-ajax-com-jquery.jpg" alt="Livro Ajax com jQuery" /></a><br /> <div class="hide"><br /> <a href="#">Livro Ajax com jQuery</a><br /> <p>Requisições Ajax com a simplicidade da jQuery</p><br /> </div><br /> </li><br /></ul>Com o HTML já definido, vamos partir para o CSS:
#work {<br /> list-style:none;<br /> margin:0;<br /> padding:0;<br />}<br />#work li {<br /> float:left;<br /> width:235px;<br /> margin:10px;<br /> display:inline;<br /> padding:3px;<br /> background:#fff;<br /> border:1px solid #cad789;<br /> height:154px;<br />}<br />#work li a {<br /> border:none;<br />}<br />#work p {<br /> margin-bottom:0;<br />}O código é bem simples, basta definir float para todos os elementos
da lista, definir também largura e altura para o box. O básico já
está pronto, agora vamos criar os efeitos:
#work li .show{<br /> display:block;<br /> width:235px;<br /> height:154px;<br />}<br />#work li .hide {<br /> color:#d4df9d;<br /> text-align: left;<br /> height: 0;<br /> overflow: hidden;<br /> background-color:#687b00;<br />}Como podem ver, foram utilizados height:0 e overflow:hidden na
class=”hide” para garantir que ela fique invisível ao usuário e somente
os elementos com a class=”show” sejam revelados ao usuário com a
utilização do seguinte código:
#work li:hover .hide{<br /> cursor: pointer;<br /> height: 133px;<br /> padding:10px;<br /> width:215px;<br />}<br />#work li:hover .show {<br /> height: 0;<br /> overflow: hidden;<br />}Eu uso a pseudo-classe :hover para definir algumas propriedades para
a class .hide toda vez que o usuário passar o mouse sobre os elementos
de lista desordenada com o id work. Depois definimos a altura do .hide
para 153px e após adicionamos height:0 e overflow:hidden para o
elemento .show.
Vejam agora o exemplo em funcionamento, mas ele ainda não funciona no Internet Explorer 6 e anteriores.
Solução para o IE6
Para que esse exemplo funcione corretamente no IE6 teremos que
utilizar de JavaScript para que ele interprete o :hover corretamente
nos elementos, basta observar o código abaixo:
<!--[if lte IE 7]><br /><script type="text/javascript" src="jquery.js"></script><br /><script type="text/javascript"><br />$(function() {<br /> $("#work li").hover(function () {<br /> $(this).addClass("over");<br /> },function () {<br /> $(this).removeClass("over");<br />});<br /></script><br /><![endif]-->O Script acima irá adicionar a class=”over” a cada item da lista. É aconselhável você utilizar comentários condicionais
para que o código seja somente lido pelo Internet Explorer 6 e
anteriores. Não podemos nos esquecer também de adicionar ao CSS a marcação
#work li.over .hide para que ela funcione semelhante a #work li:hover
.hide. Basta efetuar a seguinte alteração no CSS:
#work li:hover .hide, #work li.over .hide{<br /> cursor: pointer;<br /> height: 133px;<br /> padding:10px;<br /> width:215px;<br />}<br />#work li:hover .show, #work li.over .show {<br /> height: 0;<br /> overflow: hidden;<br />}Vejam agora o exemplo final funcional no Internet Explorer 6.
*
Artigo publicado originalmente em Min Tran.
é desenvolvedor Front-end desde 2005, viciado em XHTML e CSS. Atualmente trabalha em uma agência web, a Ambulance (www.ambulance.com.br) como desenvolvedor front-end. É criador do blog Pinceladas da Web e do CSS no Lanche, voltado para o mundo do desenvolvimento Front-End.
