Ir para conteúdo

POWERED BY:

Arquivado

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

Carmoso

Hover e link sobre célula de tabela no html

Por , em Desenvolvimento frontend

Recommended Posts

Carmoso    0

Carmoso
Postado

Galera, boa tarde.

Eu queria muito conseguir implementar algo simples em uma página html, via html direto ou CSS, de preferência por este último.

 

Note uma tabela 2x2 comum, como esta:

 

<table style="text-align: left; width: 100px;" border="1"
 cellpadding="2" cellspacing="2">
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>4</td>
    </tr>
  </tbody>
</table>

 

Cujo conteúdo de cada célula, como os números 1, 2, 3 e 4 são links. Eu queria que, ao invés de fazer com que o link fosse o texto da célula, que o link fosse a célula <td> toda, então qualquer ponto de dentro da célula seria clicável. Gostaria também que, ao passar o cursor em cima da celula, que ela exibisse um efeito tipo "hover", mudando de cor, como o botão de login desta página:

 

http://www.torrent-damage.net/login.php

 

Como fazer?

 

Obrigado!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Aprendiz CSS    3

Aprendiz CSS
Postado

pelo que entendi

 

coloque

 

td:hover {
    border: 1px solid green;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Carmoso    0

Carmoso
Postado

Caramba, estou enferrujado!

primeiramente, obrigado, e vamos lá:

 

Olá,

 

Não tenho acesso a esse site para visualizar o seu site.

 

Cumprimentos

Mas não precisa, meu caro, basta visualizar a página de login e o botão!

 

E então, criei este header...

 

<html>
<head>
	<title></title>
	<style type="text/css">
	<!--
		p {
			color: red;
			font-weight: bold;
		}
		
		td:hover {    
                border: 2px solid rgb(220, 110, 0);
                background-color: blue;
		}
	-->
	</style>
</head>

 

...só pra testar, é claro.

 

Dentro de <body>, inclui uma tabela horizontal, com duas células...

 

<table
 style="text-align: left; margin-left: auto; margin-right: auto; width: 985px; height: 33px;"
 border="1" cellpadding="0" cellspacing="0">
        <tbody>
          <tr>
            <td
 style="color: rgb(221, 183, 34); background-color: rgb(91, 46, 0); width: 200px; text-align: center; font-family: Verdana;">
            <a class="five" href="mailto:meu@e-mail.com"><font
 size="-1">Contato</font></a></td>
            <td
 style="text-align: center; color: rgb(221, 183, 34); background-color: rgb(91, 46, 0); width: 198px; font-family: Verdana;"><a
 href="página 1.html"><span style="color: rgb(221, 183, 34);">
            </span></a><font><a class="five"
 href="ajuda.html"><font size="-1">Ajuda</font></a></font></td>
          </tr>
        </tbody>
      </table>

 

...que, como os srs podem ver, contém algumas propriedades incluídas pelo editor WYSIWYG (KompoZer). Mas eu quero dominar bem a edição manual do código.

 

O CSS está no header. Como eu faço para que, neste caso, ele se aplica somente à tabela (inline CSS)? É que não sei aplicar a propriedade ".hover" quando o estilo está inline.

 

Obrigado desde já.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Carmoso    0

Carmoso
Postado

Meu Deus!! Mas onmouseover parece ser coisa de javascript, coisa que não tenho a minima idéia de como operar com!

Bom, eu confesso: não sei nada mesmo. Imagem Postada

 

Isso tudo é para meu site, que deveria ser simples: http://notasdeaula.org.

 

Como você pode ver, todo o conteúdo está contido numa grande tabela 1x1. Portanto, se eu uso o td.hover no header, ao mover o cursor para dentro da área do conteúdo, veremos uma grande mancha da cor escolhida. Horrível.

 

O senhor tem alguma sugestão para fazer com que seja possível user o hover nas células das tabelas que contêm as aulas (as que têm datas, como segunda, 17 de setembro), na do cabeçalho (a que tem os links contato, ajuda, log, etc) mas não na grande célula central? Em outras palavras, como fazer com que o td.hover se aplique a todo o documento, exceto àquela (grande) tabela? Neste caso tem como usar algo inline não para usar hover ou onmouseover, mas para excluir tal atributo?

 

Agradeço cada ajuda!

 

Edit: poxa, "conteúdo está contido" foi barra pesada.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

Sim, o onmouseover é um evento JavaScript, mas não há problema em usá-lo. Apenas vai ficar com formatação inline.

 

Mas por que não colocar em um arquivo externo? Não é mais fácil?

 

Se quiser fazer com onmouseover mesmo assim, é colocar onmouseover="this.style.background = 'red';".

 

:thumbsup:

Compartilhar este post

Link para o post
Compartilhar em outros sites

Carmoso    0

Carmoso
Postado

É que tipo, há mais de 8 anos que eu tenho pulga atrás da orelha com .js's de qualquer espécie, daí ignorei-os para sempre, botei adblock no meu Firefox para evitar carregá-los, eu tinha medo deles. Parece que eu tenho que rever alguns conceitos né?

 

E também não sei a sintaxe.. você diz que eu teria, se quisesse pôr num arquivo externo, fazer algo análogo a uma folha de estilos .css? Se for isso, não sei fazer... infelizmente.

 

Ok, vamos ao onmouseover inline:

onmouseover="this.style.background = 'red';". <--- onde exatamente eu incluo isto? Dentro da tag <td>?

 

Acho que sim. Mas, quando eu tiro o cursor de cima, nada de voltar à cor original!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Carmoso    0

Carmoso
Postado

Opa!

Acho que consegui! Woohoo, as coisas estão caminhando!

 

Mas há um problema. É que eu não tenho, infelizmente, tempo para editar o html manualmente todas as vezes. Por isso que eu uso um editor WYSIWYG. Então, todos os dias eu tenho que adicionar uma nova linha à tabela principal do site, por isso clico com o botão direito para abrir o menu-contexto, daí table insert -> row above. Isso insere nova linha na tabela, ou seja, um novo <tr>, que já vem com 5 <td>'s embutidos. OK. Mas o KompoZer insere o <tr> padrão, que portanto não vem com o código...

<td onmouseover="this.style.background = 'red';" onmouseout="this.style.background = 'none';">
...inserido nas <td>'s-filhas. Isso significa que eu teria que definir esse efeito de maneira mais global, como colocando no header ou num arquivo separado, como a stylesheet.css.

 

Como fazer? terei que criar um .js?

 

 

Enquanto isso, outra coisinha mais simples até:

Imagem Postada

 

Como você pode ver, eu usei o

 

a {display: block;
        }

 

E, como dá pra ver pelo retangulo que se desenhou, não é toda a área de dentro do TD que foi "povoada" pelo link.....

Como solucionar?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

Se for para criar um arquivo .js, é mais fácil criar um CSS, não? Imagem Postada

 

E não estou entendendo. Imagem Postada Você pode ou não usar CSS? Pois está usando no elemento a, então usa já para fazer o :hover nas td.

 

Para resolver o problema da imagem, é só colocar um padding ou definir um height.

 

:thumbsup:

Compartilhar este post

Link para o post
Compartilhar em outros sites

Carmoso    0

Carmoso
Postado

E não estou entendendo. Imagem Postada Você pode ou não usar CSS? Pois está usando no elemento a, então usa já para fazer o :hover nas td.

 

Para resolver o problema da imagem, é só colocar um padding ou definir um heigh

 

Posso usar CSS, mas prefiro não usar javascript!

 

Onde que eu aplico padding ou height conforme você falou? Imagem Postada

Compartilhar este post

Link para o post
Compartilhar em outros sites

Carmoso    0

Carmoso
Postado

Opa, desculpa a demora!

Estamos tendo progressos, graças a você!! Imagem Postada

Mas veja só, fiz um teste, pegando desta vez não a página principal do meu site ( http://notasdeaula.org ) mas uma página de anotações qualquer, em que uso tabela para colar artigos da legislação. Olha o que acontece, neste pedaço de screenshot:

Imagem Postada

Como você pode ver, parece que tem algum elemento da tabela que impede que a cor escolhida preencha ela toda. o que deve ser?

 

Enquanto isso vou trabalhando aqui para ver se implemento de vez. Imagem Postada

 

Edit: só para constar, a página da qual eu copiei a acima para fazer o teste é esta:

http://notasdeaula.org/dir/processo_civil1_19-08-09.html

 

É só descer um pouco até o começo da explicação sobre o art. 36.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Carmoso    0

Carmoso
Postado

Naaaão!! aeuyaeuheahueauheua na verdade eu quis dizer "acabei de conseguir acessar o link que você não conseguiu" Imagem Postada

 

Parece que voltei àquele outro impasse: a página principal do meu site está toda dentro de uma grande tabela, portanto todo o conteúdo está dentro de uma tag <td>. Significa que, se eu usar o efeito hover, quando o visitante for navegar ele verá uma grande mancha impedindo de se enxergar qualquer coisa que seja Imagem Postada

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