← HTML + CSS

Sobre o (a:hover)

Lida 3178 vezes

Offline

myStoned 
Membro
Mensagens 663 Gostos 8
Feedback +2

Troféus totais: 29
Trófeus: (Ver todos)
Level 5 Tenth year Anniversary Nineth year Anniversary Mobile User Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter

Estou a acabar o meu novo projecto, mas não estou a conseguir uma coisa que me esta a intrigar, pois penso que o código de CSS esteja bem.
O que estou a tentar é adicionar um hover no logótipo, ou seja, ao passar com o rato por cima mudar a cor.

Reparem, o código é este:
Código: [Seleccione]
#logo, .logo a, .logo {
background: url('images/logo.png');
width: 216px;
height: 53px;
float: left;
}
#logo, .logo a, .logo a:hover {
        background: url('images/logohover.png');
}

E o código que estou a utilizar no header, é este:
Código: [Seleccione]
<a href="<?php echo get_option('home'); ?>" id="logo"></a>

Esta apenas a aparecer o logótipo denominado como a:hover.
Agradeço antecipadamente pela ajuda.

Os melhores cumprimentos,
Salvador Muio
Offline

Júnio Branco 
Membro
Mensagens 563 Gostos 0
Feedback +2

Troféus totais: 28
Trófeus: (Ver todos)
Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

Código: [Seleccione]
#logo, .logo a{
background: url('images/logo.png');
width: 216px;
height: 53px;
float: left;
}
#logo .logo a:hover {
        background: url('images/logohover.png');
}
Vê se assim dá ou não
Offline

myStoned 
Membro
Mensagens 663 Gostos 8
Feedback +2

Troféus totais: 29
Trófeus: (Ver todos)
Level 5 Tenth year Anniversary Nineth year Anniversary Mobile User Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter

Obrigado desde já, mas não funciona ainda.
No teu exemplo apenas apresenta o logótipo sem hover, mas ao passar o rato o logótipo do hover não aparece.

Abraço!
Offline

Júnio Branco 
Membro
Mensagens 563 Gostos 0
Feedback +2

Troféus totais: 28
Trófeus: (Ver todos)
Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

Podes-me mostrar o excerto do HTML que inclui o DIV do logo?
Código: [Seleccione]
#logo a{
background: url('images/logo.png');
width: 216px;
height: 53px;
float: left;
}
#logo a:hover {
        background: url('images/logohover.png');
}
Experimenta este, mas mostra-me o código caso não dê
Offline

myStoned 
Membro
Mensagens 663 Gostos 8
Feedback +2

Troféus totais: 29
Trófeus: (Ver todos)
Level 5 Tenth year Anniversary Nineth year Anniversary Mobile User Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter

Ainda não esta a funcionar, mas qual código queres Wolf?

Muito obrigado mesmo pela ajuda que me estás a prestar, mesmo que não esteja a funcionar a intenção conta bastante.  :grin:
Offline

Gonçalo Martins 
Membro
Mensagens 229 Gostos 0
Troféus totais: 26
Trófeus: (Ver todos)
Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

O teu codigo css funcionava caso o teu html fosse assim:

Código: [Seleccione]
<div id="logo"><a href="<?php echo get_option('home'); ?>" ></a></div>
para esse HTML utiliza o seguinte css:

Código: [Seleccione]
a#logo:hover{
       background: url('images/logohover.png');
}

a#logo,a#logo:link,a#logo:visited{
background: url('images/logo.png');
width: 216px;
height: 53px;
float: left;
}
Offline

Júnio Branco 
Membro
Mensagens 563 Gostos 0
Feedback +2

Troféus totais: 28
Trófeus: (Ver todos)
Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

Ainda não esta a funcionar, mas qual código queres Wolf?

Muito obrigado mesmo pela ajuda que me estás a prestar, mesmo que não esteja a funcionar a intenção conta bastante.  :grin:
:superlol: Pois bem tento ehehe, mas seria mais facil mostrares me o código do div do logo
Offline

myStoned 
Membro
Mensagens 663 Gostos 8
Feedback +2

Troféus totais: 29
Trófeus: (Ver todos)
Level 5 Tenth year Anniversary Nineth year Anniversary Mobile User Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter

Wolf, todos os códigos estão presentes no primeiro tópico. Abraço!
Offline

Flieger 
Membro
Mensagens 198 Gostos 0
Troféus totais: 29
Trófeus: (Ver todos)
Windows User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter Level 5 Level 4 Level 3

Cheguei agora da festa aqui da Vila mas....deixa la ver se bate certo lol

Código: (CSS) [Seleccione]
a#logo, a:visited#logo, a:active#logo { background-image: url(images/logo.png); height: 53px; width:216px; float: left; }
a#logo:hover { background-image:url(images/logohover.png); }

Código: (PHP) [Seleccione]
<a href="<?php echo get_option('home'); ?>" id="logo"></a>

Abraço
Offline

myStoned 
Membro
Mensagens 663 Gostos 8
Feedback +2

Troféus totais: 29
Trófeus: (Ver todos)
Level 5 Tenth year Anniversary Nineth year Anniversary Mobile User Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter

Cheguei agora da festa aqui da Vila mas....deixa la ver se bate certo lol

Código: (CSS) [Seleccione]
a#logo, a:visited#logo, a:active#logo { background-image: url(images/logo.png); height: 53px; width:216px; float: left; }
a#logo:hover { background-image:url(images/logohover.png); }

Código: (PHP) [Seleccione]
<a href="<?php echo get_option('home'); ?>" id="logo"></a>

Abraço

Jackpot! Muito obrigado Flieger e a todos os outros que participarão! Abraços!