Hover Sem Usar O Class Id
#1
Posted 24/07/2008, 15:28
<style type="text/css">
<!--
classe {text-decoration: none}
classe:hover {text-decoration: underline; color: #FF0000;}
-->
</style>
daí eu jogo na class ID
<div class="classe"> ou mais ou menos isso.
ocorre que eu queria jogar isso dentro do style
<div style="text-decoration: none" + hover???>
como que eu coloco o hover dentro da tag?
#2
Posted 25/07/2008, 00:21
utilizando o Class ID fica assim
<style type="text/css">
<!--
classe {text-decoration: none}
classe:hover {text-decoration: underline; color: #FF0000;}
-->
</style>
daí eu jogo na class ID
<div class="classe"> ou mais ou menos isso.
ocorre que eu queria jogar isso dentro do style
<div style="text-decoration: none" + hover???>
como que eu coloco o hover dentro da tag?
javascript...
para varias propriedades(serve só pra uma tb)
<div style="text-decoration: none" onmouseover=" with(this.style){color='#FFFFFF'; textDecoration='underline'; }">
só pra uma(mas serve para varias também, mas toda hora você tera que repetir this.style.propriedade="valor")
<div style="text-decoration: none" onmouseover=" this.style.color='#FFFFFF';" >
endereço com propriedades css em java script: http://codepunk.hard...g.uk/css2js.htm
, mas sinceramente, recomendo que você faça tudo isso em arquivos sepados com css puro mesmo.
Edição feita por: Édipo Costa Rebouças, 25/07/2008, 00:31.
#3
Posted 25/07/2008, 15:17
valeu. funcionou tudo
<div style="BACKGROUND: url(images/BGIMG.jpg) no-repeat; FLOAT: left; WIDTH: 74px; HEIGHT: 61px" onmouseover=" with(this.style){BACKGROUNDIMAGE='images/BGIMG.jpg'; backgroundRepeat='no-repeat'; styleFloat='left'; WIDTH='74px'; HEIGHT='61px'; backgroundPosition='50%' }" onmouseout=" with(this.style){BACKGROUNDIMAGE='images/BGIMG.jpg'; backgroundRepeat='no-repeat'; WIDTH='74px'; HEIGHT='61px'; backgroundPosition='top left' }">aqui muda</div>É UMA IMAGEM que seria a parte de cima a imagem sem a ativação e na parte de baixo ela ativada, com outra cor. daí quando passa o mouse por cima apenas reposiciona o BACKGROUNDIMAGE e parece que é outra imagem.
Vai ficar um codigo quilométrico, mas prefiro fazer assim pq não precisa ficar se perdendo num emaranhado de arquivos e num labirinto de codigos.
daí fazendo marcações
<!-- Menu de cima começa aqui-->
<!-- Menu de cima termina aqui-->
fica mais fácil, muito embora o desempenho caia um pouco.
#4
Posted 25/07/2008, 15:35
cara, faz separado na folha, o objetivo de se usar css é separar a estilização da estrura, logo se vc quiser mudar o título de todas as suas 90 páginas pra vermelho vc só muda uma folha de estilo, uma linha, e não paginas, fora que o codigo fica mais pesado.não apenas esclareceu minha dúvida, como também me ensinou a trabalhar com o javascript + style shit, digo, sheet...
valeu. funcionou tudo<div style="BACKGROUND: url(images/BGIMG.jpg) no-repeat; FLOAT: left; WIDTH: 74px; HEIGHT: 61px" onmouseover=" with(this.style){BACKGROUNDIMAGE='images/BGIMG.jpg'; backgroundRepeat='no-repeat'; styleFloat='left'; WIDTH='74px'; HEIGHT='61px'; backgroundPosition='50%' }" onmouseout=" with(this.style){BACKGROUNDIMAGE='images/BGIMG.jpg'; backgroundRepeat='no-repeat'; WIDTH='74px'; HEIGHT='61px'; backgroundPosition='top left' }">aqui muda</div>É UMA IMAGEM que seria a parte de cima a imagem sem a ativação e na parte de baixo ela ativada, com outra cor. daí quando passa o mouse por cima apenas reposiciona o BACKGROUNDIMAGE e parece que é outra imagem.
Vai ficar um codigo quilométrico, mas prefiro fazer assim pq não precisa ficar se perdendo num emaranhado de arquivos e num labirinto de codigos.
daí fazendo marcações
<!-- Menu de cima começa aqui-->
<!-- Menu de cima termina aqui-->
fica mais fácil, muito embora o desempenho caia um pouco.
Edição feita por: Édipo Costa Rebouças, 25/07/2008, 15:38.
#5
Posted 25/07/2008, 15:41
vai ser o mesmo menu para o site todo
assim, quem ver o asp gerado na navegador vai ver uma inhaca de códigos, mas a font asp vai ser bem mas palatável
Edição feita por: JurisCode, 25/07/2008, 15:42.
#6
Posted 25/07/2008, 15:46
vou fazer programação em asp, daí eu uso includes
vai ser o mesmo menu para o site todo
assim, quem ver o asp gerado na navegador vai ver uma inhaca de códigos, mas a font asp vai ser bem mas palatável
Então cara, eu faço isso com PHP, acredita cara, é melhor solução quase sempre é o css, nesse caso em especifico, o css não tem como tratar tais eventos, mas sempre que puder utilize o css com a folha separada, você pode usar varias folhas cara, para estilizar a sua pagina, uma pro header , outra pro content e ai vai, fora que se vc usar nomes que seguinifiquem algo pra vc fica bem mais facil, é só pesquisar no css.
Pro seu css ficar pequeno e util, vc tem que aprender a deixar ele mais geral, por exemplo, o que eu uso para hovers é o seguinte:
.bot{
display:block;
text-indent:-9999px;
background-repeat:no-repeat;
}
.bot:hover{
background-position:0 -30px;
}
ai, todas as imagem que faço hover crio o a imagem do botão e o hover na mesma imagem, posicionando a parte do hover a 30px abaixo do top da imagem, com isso, ganho um efeito muito bom aplicando somente isto aqui ó
<a href="http://www.google.com" class="bot google"title="Google">Google</a>
a unica coisa a mais que escrevo na folha de estiloé isso:
a.google{
background-image: url();
height: px;
width:px;
}
Edição feita por: Édipo Costa Rebouças, 25/07/2008, 16:09.
#7
Posted 29/07/2008, 12:40
onmouseover="this.className = 'classe'"
Yeah I do have some stories, and it's true I want all the glory ...
0 user(s) are reading this topic
0 membro(s), 0 visitante(s) e 0 membros anônimo(s)