Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

bluereal

Show Hide layer como se fosse tool tip

Por , em Desenvolvimento frontend

Recommended Posts

bluereal    0

bluereal
Postado

:) BuenasEstava treinando um tutorial sobre tool tip do maujor, e resolvi experimentar usar isso para substituir uma de minhas maiores paixões, o show-hide layers do Dreamweaver.Caramba: funcionou uma beleza: coloquei um link falso no a:hover, e configurei o tool tip com texto e imagem.Ficou lindo demais. Só que fiz tudo isso usando o "span". Será que isso é válido?Outra questão é: estou querendo usar tudo isso a partir de uma barra de navegação cujos botões são imagens, e o hover apenas abre o tool tip, mas não fica sensível a ele.Alguém sabe onde posso encontrar respostas para isso? Ou será que alguém daqui mesmo sabe "what I mean"? :huh: Blue

Compartilhar este post

Link para o post
Compartilhar em outros sites

micox    2

micox
Postado

Uai. vai ficar show dimais...Posta aí pra gente ver comé que tá e ir metendo o dedo.

e o hover apenas abre o tool tip, mas não fica sensível a ele

Isso aí eu não entendi

Compartilhar este post

Link para o post
Compartilhar em outros sites

bluereal    0

bluereal
Postado

Olha aí, micox

Estou mandando o primeiro exemplo que fiz - já existem outras versões melhoradas (como o hover sem link nenhum, e não falso) mas não estou achando o arquivo que salvei sei lá onde.

Fica com esse aí, que já dá pra começar... hehehe

.

<style type="text/css">p.barNav {position:relative;} .barNav a {font: 12px Arial, Verdana,Helvetica,sans-serif;color: #000000;text-decoration: none;background: #FFC50C;text-align: center;padding: 1px 5px;margin-right: 1px;border: 1px solid #000000;}.barNav a:hover {color: #666666;background: #FCFCFC;border: 1px solid #666666;}.barNav a span { display:none;}.barNav a:hover span.primeiro {display: block;position: absolute; top:40px; left:80px; width: 468px;height: 300px;padding: 2px 0; color: #fff; background:url(imagens2/cronicas/jardim_dark3.jpg) no-repeat;font-size: 12px; border:2px dotted #000; text-align:left;}.barNav a:hover span.segundo {display: block;position: absolute; top:40px; left:80px; width: 450px;height: 360px;padding: 2px 0; color: #fff; background:url(imagens2/cronicas/jardim_dark3.jpg) no-repeat;font-size: 12px; border:2px dotted #000; text-align:left;}.barNav a:hover span.terceiro {display: block;position: absolute; top:40px; left:80px; width: 400px;height: 250px;padding: 2px 0; color: #fff; background:url(imagens2/cronicas/jardim_dark3.jpg) no-repeat;font-size: 12px; border:2px dotted #000; text-align:left;}.barNav a:hover span.quarto {display: block;position: absolute; top:40px; left:80px; width: 430px;height: 370px;padding: 2px 0; color: #fff; background:url(imagens2/cronicas/jardim_dark3.jpg) no-repeat;font-size: 12px; border:2px dotted #000; text-align:left;}--></style></head><body><p class="barNav"> <a href="#" >Home<span class="primeiro"></span></a><a href="#">Quem somos<span class="segundo">Conheça nossa equipe. Profissionais de alto gabarito técnico integram nossos quadros </span></a><a href="#">Portfólio<span class="terceiro">Uma coleção de nossos trabalhos e a opinião de clientes </span></a><a href="#">Contato<span class="quarto"></span></a> </p>
Me diz o que achou...

 

Abrs

:rolleyes:

Compartilhar este post

Link para o post
Compartilhar em outros sites

micox    2

micox
Postado

Ficou bom...

Só que fiz tudo isso usando o "span".Será que isso é válido?

Na minha opinião, é valido simMas continuo sem entender essa parte:

e o hover apenas abre o tool tip, mas não fica sensível a ele

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito