[Resolvido] Link e a:hover em div

[Layo 10]

Boa tarde pessoal !!!

 

Sou novo no CSS porém surgiu uma dúvida que nao consigo resolver. Tenho uma div onde quero colocar um efeito hover porém não estou conseguindo obter o resultado e o tamanho tambem não redimenciona:

 

CSS

.caixa {
width: 100px;
height: 100px;
border: 2px solid #000;
margin: 20px;
padding: 5px;
}

.caixa a:hover{
width: 100px;
height: 100px;
border: 2px solid #CCC;
margin: 20px;
padding: 5px;
}

 

HTML

<p><a href="#"><span class="caixa"></span></a></p>

 

1 - Os elementos width e height não estao respeitando o valor de 100px.

2 - O efeito a:hover não funciona.

 

-------------------------------------------------------------------------

 

Eu consegui fazer no proprio elemento de linha "a href" tive q transforma-lo em elemento de bloco usando o display:block; porem gostaria de aprender a utlizar esse modo para poder ter mais controle dos seletores, nao quero q todo conteudo "a href" pegue essa formatação valeu!!

[NetBoy16 72]

Analisando sua estilizacao :

 

.caixa a:hover{
width: 100px;
height: 100px;
border: 2px solid #CCC;
margin: 20px;
padding: 5px;
}

 

Ali mostra que o link(<a>) está dentro do .caixa(<span>)

 

Porém no html mostra-se ao contrário:

 

<p><a href="#"><span class="caixa"></span></a></p>

 

O .caixa está dentro do link, entao o cerot a se fazer na estilizacao seria:

 

a:hover .caixa{
width: 100px;
height: 100px;
border: 2px solid #CCC;
margin: 20px;
padding: 5px;
}

 

O html você mantem o mesmo, oque quero dizer com essa estilizacao?

 

R:.caixa está dentro do link, certo? entao quando fizer o hover no link vai aplicar as alteracoes no .caixa.

 

Resumindo, você tem que respeitar a ordem, um exemplo:

 

<div id="texto"><a href="#">teste</a></div>

a:hover #texto { color:blue; } /* Errado, pois a div nao está dentro do link */

#texto a:hover { color:blue; } /* Correto, pois o link está dentro da div */

 

 

E é isso ai, espero ter ajudado, testa ai pra você ver, qualquer duvida volte a postar :thumbsup:

 

Eu consegui fazer no proprio elemento de linha "a href" tive q transforma-lo em elemento de bloco usando o display:block; porem gostaria de aprender a utlizar esse modo para poder ter mais controle dos seletores, nao quero q todo conteudo "a href" pegue essa formatação valeu!!

 

Pra você aplicar uma determinada regra em um determinado link tem 2 escolhas:

 

1)aplicar uma classe/id a esse link

2)caso dentro da div,span,etc... tenha somente um link você pode fazer como no exemplo abaixo:

 

<div id="texto"><a href="#">teste</a></div>

#texto a {
  text-decoration:none;
  color:red;
}

/* Ou seja, apenas o link(s) que estiver dentro da div #texto nao vai possuir decoracao e vai ter cor vermelha */

[Layo 10]

Valeu NetBoy16 deu certo a questao do a:hover e tambem entendi a sua explicação nao sabia que era por ordem:

 

a:hover #teste

 

<a href="#"><div id="teste"></div></a>

 

Obrigado cara !

 

Valeu agora so ficou a questao do width e height q nao esta ficando os 100px eu coloquei os valores no .caixa mesmo defindo ele esta pequeno se eu escrevo algo dentro da caixa ela vai c enquadrando conforme o texto ou tamanho da imagem.

 

Surgiu outra duvida a formatação do "a:hover .caixa" e do ".caixa" sao praticamente iguais so muda a cor da borda existe alguma forma de diminuir ?

[Diéssica 140]

Valeu agora so ficou a questao do width e height q nao esta ficando os 100px eu coloquei os valores no .caixa mesmo defindo ele esta pequeno se eu escrevo algo dentro da caixa ela vai c enquadrando conforme o texto ou tamanho da imagem.

Adiciona essas regras na classe do elemento:

display:inline-block;

:seta: http://www.w3schools.com/cssref/pr_class_display.asp

 

Surgiu outra duvida a formatação do "a:hover .caixa" e do ".caixa" sao praticamente iguais so muda a cor da borda existe alguma forma de diminuir ?

Sim. No a:hover .caixa deixa apenas a formatação para a borda. Ele vai pegar toda a formatação do .caixa por padrão, e o :hover vai mudar conforme as determinações.

 

a:hover .caixa {
border: 2px solid #CCC;
}

E eu vi que tu usou span só pra pôr uma classe que pode ser determinada no próprio link. No HTML:

<p><a href="#" class="caixa"></a></p>

E no CSS só muda o nome do segundo seletor:

a:hover .caixa :seta: .caixa:hover

 

Fica a sugestão :bye:

[NetBoy16 72]

Isso ai que a Diéssica disse, faco das palavras dela as minhas :thumbsup:

[Layo 10]

Boa tarde obrigado!!

 

display:inline-block;

 

Resolveu meu problema e tambem entendi as regras passadas obrigado pelas dicas, surgiu outra duvida relacionada:

 

Com .caixa:hover ou a:hover .caixa qual a diferença ??

 

E se forem 2 classes ou 2 divs, tipo assim:

 

#meio {
width: 150px;
height: 300px;
float: right;
background-color: #333;
margin-top: 20px;
}


#meio2 {
width: 150px;
height: 300px;
float: right;
background-color: #ccc;
margin-top: 20px;
}

 

So mudar o background-color Eh possivel ?

 

#meio #meio2 {
background-color: #CCC;

}

 

DIV COM CLASSE

 

#meio {
width: 150px;
height: 300px;
float: right;
background-color: #333;
margin-top: 20px;
}


.meio2 {
width: 150px;
height: 300px;
float: right;
background-color: #ccc;
margin-top: 20px;
}

 

#meio.meio2 {
background-color: #CCC;
}

[NetBoy16 72]

Boa tarde, a diferenca é que no .caixa:hover vai aplica a estilizacao quando fizer hover no elemento com essa classe, e no caso do segundo vai aplicar estilizacao quando passar o mouse no link e a estilizacao vai afetar todos os elementos com a classe .caixa.

 

 

A segunda pergunta nao entendi direito, mas vamos ver se é isso, sim é possivel fazer isso que você perguntou, pode-se aplicar a mesma propriedade(s) a mais de um elemento, id e/ou classe, basta separalos por virgula, pq se eu deixar #meio .meio2 ele vai entender que todo elemento com classe .meio2 dentro do elemento com id #meio vai receber aquela estilizacao, entao se você quiser estilizar o #meio e o .meio2 com as mesmas propriedades basta fazer assim:

 

#meio,.meio2 {
background-color: #CCC;
}

[Layo 10]

valeu NetBoy16 pelas respostas, mais entao eu entendi que vai pegar o estilo a:hover .caixa ou .caixa:hover apenas na classe gostaria de saber se tem alguma diferença ou se for igual qual o aconselhavel para utilizar ?

 

Entao em relação aos seletores:

 

#meio,.meio2 {
background-color: #CCC;
}

 

era essa mesmo a duvida porem ele nao deu certo so da certo quando eu separo a div da classe

[Diéssica 140]

A pseudo classe :hover vale pra qualquer seletor. O a:hover é só mais um.

 

Então, a diferença é... nenhuma. :)

 

a:hover

#div:hover

.classe:hover

 

E assim vai...

[Layo 10]

Valeu galera pela ajuda dei uma olhada no pseudo classe e dos pseudo elementos achei muitos materiais, vou continuar nos estudos obrigado pela atenção.

[NetBoy16 72]

De nada, qualquer coisa soh dar um tok, e bom estudos :thumbsup: