Hover e link sobre célula de tabela no html

[Thiago Retondar 18]

 

Consegui acessar a página, porém ao passar o curso em cima, nada acontece.

 

Porém esse seu problema pode ser resolvido adicionado um CSS Reset no início do documento ou fazendo de uma forma feia assim:

 

table:hover{background: red;}

Opte em utilizar a primeira opção.

 

:thumbsup:

 

Edit: Procure deixar sua tabela com mais semântica. Olhe este e este link.

[Carmoso 0]

Sim, sim, o documento ae acima, que eu falei pra você ver, seria o original que, se modificado com o hover sobre <td>, tornaria chata a navegação pois toda vez que o leitor fosse passar o mouse sobre uma tabela 1x1 como as que têm os artigos a cor mudaria, seria horrível.

 

Antes que eu mesmo me aparafuse em confusões, criei aqui um diretório de testes onde coloquei dois arquivos:

 

http://notasdeaula.org/testes/hover/index.html

http://notasdeaula.org/testes/hover/notas_faltantes.html

o primeiro é uma replica da página principal do meu site, que tem o problema de ter uma grande tabela, o que tornaria inviável o uso de uma regra geral de mudança de cor para todas as instâncias da tag <td>. O segundo é a replica de uma das páginas do meu site, que, apesar de ser uma tabela, não está assentada sob uma tabela maior e mais geral, então é viável usar a regra geral de hover.

 

Quais os problemas até agora: há dois links visíveis na segunda página. um deles é "quarta, 23 de setembro". Note que, quando você aproxima o cursor, o link só se tornará clicável quando aquele está bem próximo da expressão (quarta, 23 de setembro). Devia se tornar clicável só de colocar o cursor sobre a célula (no momento em que ela se torna laranja).. como fazer isso?

 

E, quanto ao primeiro link, que é a página principal do site, veja o efeito, tosquíssimo, que surge quando se usa uma regra geral de hover nas tags <Td>. Ignore a feiura e o total desalinhamento, isso é por outro motivo.

[Thiago Retondar 18]

Crie um id="noHover" para o td "grande" e coloque assim no CSS:

td#noHover:hover{background: none;}

:thumbsup:

[Carmoso 0]

Pronto, incluí isso no CSS, mas como eu faço, no html, a referência a esse novo item colocado?

 

Agradeço a paciência de até agora!

[Thiago Retondar 18]

É só colocar no naquele td que envolve tudo o id="noHover" .

 

:thumbsup:

[Carmoso 0]

Opa! estamos tendo sucesso!!

Veja o resultado parcial:

http://notasdeaula.org/testes/hover/index.html

 

Como você pode ver, tive sucesso em incluir o id=noHover.

Para isso, crei um novo CSS para se aplicar somente a essa página principal, e assim evitar aquele efeito tosco de desalinhamento.

 

Falta só explicar as irregularidades vistas na página do link acima, como a dissonância na linha com o conteúdo quarta, 16 de setembro, prova: segunda, 28/9... e assim por diante bem como o desalinhamento no mural de avisos, onde há referências à matéria de Direito Penal, contraposta à página original, vista em http://notasdeaula.org .

 

:thumbsup:

[Thiago Retondar 18]

Não entendi sua última dúvida?

 

Acessei o http://notasdeaula.org e está normal.

 

:thumbsup:

[Carmoso 0]

Desculpa, eu que não fui claro mesmo.

http://notasdeaula.org, que aponta diretamente para o arquivo index.html, é a página principal do meu site, que deverá ser modificada assim que eu terminar de fazer as mudanças que eu pretendo, sem que haja falhas.

 

Então, o que você vê em...

http://notasdeaula.org/testes/hover/index.html

...é exatamente uma réplica do index.html que você vê em http://notasdeaula.org. Na verdade, para criar a página vista em http://notasdeaula.org/testes/hover/index.html, eu copiei o arquivo html da página principal (http://notasdeaula.org) e coloquei naquele diretório de testes.

 

Então, o arquivo http://notasdeaula.org/testes/hover/index.html é a página na qual eu estou trabalhando, e, até que ela fique perfeita com as novas modificações, o original, http://notasdeaula.org (index.html) se mantém intacto, até eu ter a segurança de que a nova página estará perfeita. Isso significa que a nova página deve se parecer ao máximo com a velha, exceto pelas modificações, quais sejam, os hovers. Como você pode ver, na página original, http://notasdeaula.org, a linha que contém os dados:

"quarta, 16 de setembro prova: segunda, 28 /9 prova: terça, 29/9 segunda, 14 de setembro

sexta, 4 de setembro"

está normal, enquanto que na página experimental, a http://notasdeaula.org/testes/hover/index.html, a linha está "gorda" e com os textos "segunda, 14 de setembro" e "sexta, 4 de setembro" desalinhados verticalmente.

 

Outra coisa que está errada na página experimental (http://notasdeaula.org/testes/hover/index.html) é o mural de avisos, que contém o texto...

30/09/09 às 22:59: adicionada página com explicações sobre as notas faltantes.

 

Últ7ima nota adicionada: Direito Penal de 05/10.

 

E-mail da turma: ceub.direitoe@gmail.com

senha: segundo2009

 

Não deixem de ler a

Ele também tem algo errado em relação à página original (http://notasdeaula.org). Nesta, ele está bem posicionado. Por quê?

 

Obrigado desde já!

[Thiago Retondar 18]

[1] Só tirar o display: block do td a do http://notasdeaula.org/testes/hover/notas-main.css.

 

[2] Está igual o posicionamento, só que aqui tem mais texto que aqui.

 

:thumbsup:

[Carmoso 0]

Mais progressos! yupi!!

Estamos quase lá. Deu certo, na verdade.

Só um problema logístico: veja novamente os dois links:

http://notasdeaula.org

e

http://notasdeaula.org/testes/hover/index.html

 

E compare-os. Parece que estão idênticos, exceto, é claro, pelo hover effect. No entanto, parece que deixei passar algo: na verdade, a página é cheia de tabelas, e o efeito hover se aplica a todas as tags TD. Isso é chato, pois veja o efeito inesperado ao posicionar o mouse sobre "clique aqui para saber sobre as notas faltantes" no canto inferior direito. como você pode ver, ali tem uma tabela, portanto uma tag TD, e bem como na região à esquerda desta.

De fato, eu só queria que o efeito se aplicasse:

 

À grande tabela central, com as notas de aula (exemplo: quarta, 16 de setembro) e também na tabela do cabeçalho (Contato|Ajuda|Log|Primeiro semestre|Segundo semestre|Terceiro semestre).

 

Tem como fazer sem chateação adicional para você ou mudança radical de planos?

[Thiago Retondar 18]

Esse é ruim de usar tabelas. =/ Vai ter que aplicar mais um id. Faça as mesmas coisa dos posts #23 e #25.

 

:thumbsup:

[Carmoso 0]

Assim eu fiz, e deparei com uma decepção: parece que o background-color: rgb(91, 46, 0) aplicado a uma célula se sobrepõe ao efeito hover. Veja:

http://notasdeaula.org/testes/hover/index.html

Atualizei o notas-main.css:

td:hover{

background: rgb(91, 46, 0);

}

 

td#Hover2:hover{

background: rgb(153, 51,0);

}

 

td#noHover:hover{

background: none;

}

 

td a{

height: 100%;

}

 

Como pode ver na primeira célula da tasbela superior, ela foi a única que recebeu um inline background-color, portanto tem prioridade sobre o efeito que eu coloquei na stylesheet externa. Tem como evitar isso? Ou seja, eu queria que todas as demais células da tabela superior ficassem com o fundo marrom (91, 46, 0) e, ao se passar o cursor sobre, que mude para o marrom mais claro (153, 51, 0).

 

Não confundir com a tabela principal, que tem fundo claro, e, quando o cursor passa sobre, ela adquire a cor marrom escura, a mesma da tabela superior no estado normal (91, 46, 0).

[Thiago Retondar 18]

Coloque então no tr e não no td.

 

Veja que você repetiu id e isso não pode. Se precisar repetir, use class.

 

:thumbsup:

[Carmoso 0]

Eu repeti? Uma é a id="noHover" e outra, criada por mim seguindo sua lógica, foi a id="Hover2" !

[Thiago Retondar 18]

Sim. NO #Hover2. Look:

<tr> <td id="Hover2" ;="" style="text-align: center; background-color: rgb(91, 46, 0); font-family: Verdana; width: 160px; color: rgb(91, 46, 0);"> <a class="five" href="mailto:darossa@gmail.com"><font size="-1">Contato</font></a></td> <td id="Hover2" ;="" style="text-align: center; font-family: Verdana; width: 160px; color: rgb(91, 46, 0);"><a href="ajuda.html"> </a><font><a class="five" href="ajuda.html"><font size="-1">Ajuda</font></a></font></td> <td id="Hover2" ;="" style="text-align: center; font-family: Verdana; width: 160px; color: rgb(91, 46, 0);"><a class="five" href="log.html"><font size="-1">Log</font></a></td> <td id="Hover2" ;="" style="text-align: center; font-family: Verdana; width: 160px; color: rgb(91, 46, 0);"><a class="five" href="notas1.html"><font size="-1">Primeirosemestre</font></a></td> <td id="Hover2" ;="" style="text-align: center; font-family: Verdana; width: 160px; color: rgb(91, 46, 0);"><a class="five" href="notas2.html"><font size="-1">Segundosemestre</font></a></td> <td id="Hover2" ;="" style="text-align: center; font-family: Verdana; width: 160px; color: rgb(91, 46, 0);"><a class="five" href="notas3.html"><font size="-1">Terceirosemestre</font></a></td> </tr>

:thumbsup:

[Carmoso 0]

Xi Maria, mas agora é que eu não tou entendendo mais nada. Pelo que posso ver do fragmento de código que você postou acima, só vejo seis instâncias da string <td id="Hover2". Nem sequer há o símbolo "#" no trecho. Porque, se o problema é a repetição de <td id="Hover2" , qual é o problema? Não entendi.

 

Edit: e se eu colocasse no <TR>, não seria toda a linha da tabela que mudaria de cor ao o mouse passar por cima dela, e não apenas as células individuais?

[Pablo RD 5]

Desculpem a intromissão, mas não estou resistindo, primeira oportunidade de poder compartilhar meu conhecimento nessa área... ^^

 

Então Xaveco, é porque só pode ser usado um mesmo ID em um só elemento (ou seja, o id Hover2 só pode ser usado em um elemento HTML, mas podem ser criados mais ids) , e no trecho que o Thiago postou, você usou em várias <td>, já as classes podem ser usadas em quantos elementos quiser.

 

[Thiago Retondar 18]

Ihhh Pablo... Sai daqui. Seu ganso!

 

Bem, só para esclarecer:

Nem sequer há o símbolo "#"

Esse simbolo no CSS pode reptir quantas vezes quiser. Ele é apenas um seletor para o CSS, entende?

 

No HTML é que você não pode repetir o id="", entendeu?

 

Pegue alguma apostila de HTML e CSS e estude-a. Vai te ajudar.

 

:thumbsup:

[Carmoso 0]

Opa, voltei.

Sim, eu havia lido sua última resposta, desculpe a demora.

Lerei assim que possível. Enquanto isso, vou ver se implemento algo pequeno, apenas.

OBRIGADO por toda a ajuda até agora!!

[Thiago Retondar 18]

Ok.

 

Caso resolve seu problema, volte a postar e nos avisar.

 

:thumbsup: