[Resolvido] hover nao funciona como deveria

GILALKMIN · Janeiro 28, 2012

Boa noite galera!!!

Estou montando um menu pro meu site, infelizmente tenho conhecimentos meio limitados... rssr o comando hover não esta funcionando como deveria na barra de baixo... a ideia que permaneça a imagem e só quando passa-se o mouse ele daria um brilho apenas... como no de cima.

segue o link como demonstrativo...

http://strikelanhous...barrateste.html

segue o script abaixo:

@charset "utf-8";
/* CSS Document */

body{
margin: 0 auto 0 auto;
padding: 0 0;
}

#todo{
margin: 0 auto 0 auto;
width: 1000px;
height:auto;
position:relative;
padding: 0 0;
background: 
}
#fundo{
background: url(../imagens/fundoazulclaro.png);
padding: 0 0;
margin: 0 auto 0 auto;
width:1000px;
height:1500px;
position:absolute;
}

/*** topo ***/

#topo{
margin: 0 auto 0 auto;
padding:0 0;
width:1000px;
height:245px;
position:absolute;
left: 0px;
}

/*** menu superior ***/
#menusuper{
width:1000px;
height:40px;
top:0px;
left:0px;
}

/*** barra superior ***/

#wrapper {
display: block;
width: 1000px;
height:40px;
margin: 0px auto;
font: 100%/1.25 arial, helvetica, sans-serif;
   color: #000000;
}

/*** formato menu ***/

#memu{ 
display: block;
   text-align: center;
   font-size: 120%;
   text-decoration: none;
position:absolute; 	

}

#menu ul { 
width: 1000px; /*** ajustar valor se texto menor / maior (tamanho total da pagina) ***/
   height: 40px;
margin: 0 auto;
padding: 0;
line-height: 40px; /*** centraliza o texto na vertical na mesma altura ***/
text-decoration: none;
   background:url(../imagens/menu_bg.jpg) repeat-x left top;
}

/*Left Corner*/

#menu ul li.left {
display: block;
float: left;
clear: left;
width: 100px;
height: 40px;
   background:url(../imagens/menu_l.jpg) no-repeat left top;
}

/*Right Corner*/

#menu ul li.right {
display: block;
float: right;
clear: right;
width: 40px;
height: 40px;
   background:url(../imagens/menu_r.jpg) no-repeat right top;
}

#menu ul li { 
width: auto;
display: inline;
float: left;
list-style: none;
text-align: center;
text-decoration: none;
}

#menu ul li a { 
display: block;
text-decoration: none;
text-transform: inherit;
padding: 0 25px;
color: #CCCCCC;
}

#menu ul li em {
display: block;
float: left;
width: 2px;
height: 40px;
   background:url(../imagens/menu_sep.jpg) no-repeat left top;
}

/*** ultimo separador ***/
/*** Sera add um separador no ultimo link ***/

#menu ul li.sep {
width: 2px;
   background:url(../imagens/menu_sep.jpg) no-repeat left top;
}

#menu ul li a:hover, #menu ul li a:active { 
background: url(../imagens/menu_over.jpg) repeat-x center top;
text-decoration: none;
Color: white;
}

#menu ul li a:active {
font-weight: bold;
cursor: default;
}

/*** logotipo ***/
#logo{
width:1000px;
height:135px;
top:50px;
left:0px;
position:absolute;
alignment-adjust:central;
}

#logotipo{
width:760px;
height:135px;
top:0px;
left:120px;
position:absolute;
alignment-adjust: central;
/*background:url(../imagens/logo_strike.png) no-repeat center;*/
}

/*** menu inferior ***/
#infmenu{
width:1000px;
height:40px;
top:195px;
left:0;
position:absolute;
}

/****** menu inferior *****/

#wrapperinf{
display: block;
width: 1000px;
height:40px;
   color: #000000;
}

#menuinf{
display: block;
text-align: center;
font-size: 120%;
text-decoration: none;
position:absolute;
float:right;
top:0px;
left:0px;
}

#menuinf ul { 
width: 1000px; /*** ajustar valor se texto menor / maior (tamanho total da pagina) ***/
   height: 40px;
margin: 0px auto;
padding: 0;
line-height: 40px; /*** centraliza o texto na vertical na mesma altura ***/
text-decoration: none;
   background:url(../imagens/menu_bg.jpg) repeat-x left top;

}

/*** lado esquerdo ***/

#menuinf ul li.leftinf {
display: block;
float: left;
clear: left;
width: 105px;
height: 40px;
   background:url(../imagens/menu_l.jpg) no-repeat left top;
}

/*** lado direito ***/

#menuinf ul li.rightinf {
display: block;
float: right;
clear: right;
width: 40px;
height: 40px;
   background:url(../imagens/menu_r.jpg) no-repeat right top;
}

#menuinf ul li { 
width: auto;
display: inline;
float: left;
list-style: none;
text-align: center;
text-decoration: none;
}

#menuinf ul li a { 
display: block;
text-decoration: none;
text-transform: inherit;
padding: 04px 33px;
color: #CCCCCC;
}

#menuinf ul li em {
display: block;
float: left;
width: 2px;
height: 40px;
   background:url(../imagens/menu_sep.jpg) no-repeat left top;
}

/*** ultimo separador ***/
/*** Sera add um separador no ultimo link ***/

#menuinf ul li.sepinf {
width: 2px;
   background:url(../imagens/menu_sep.jpg) no-repeat left top;
}

#menuinf ul li a:hover, #menuinf ul li a:active { 
background: url(../imagens/menu_over.jpg) repeat-x center top;
text-decoration: none;
Color: white;
}

#menuinf ul li a:active {
font-weight: bold;
cursor: default;
}

/*** get ***/

.orkut{
width:32px;
height:32px;
background: url(../imagens/orkut_get.png) no-repeat;
background-position: center;
}

#menuinf ul li a:hover .orkut {
width:32px;
height:32px;
background-image: url(../imagens/orkut_get.png) no-repeat;
background-position: center;
}

.msn{
width:32px;
height:32px;
background: url(../imagens/msn_get.png) no-repeat;
background-position: center;
}

.face{
width:32px;
height:32px;
background: url(../imagens/face_get.png) no-repeat;
background-position: center;
}

.twitter{
width:32px;
height:32px;
background: url(../imagens/twitter_get.png) no-repeat;
background-position: center;
}

.myspace{
width:32px;
height:32px;
background: url(../imagens/myspace_get.png) no-repeat;
background-position: center;
}

.youtube{
width:32px;
height:32px;
background: url(../imagens/youtube_get.png) no-repeat;
background-position: center;
}

.sinuca{
width:32px;
height:32px;
background: url(../imagens/sinuca_yahoo_get.png) no-repeat;
background-position: center;
}

.tempo{
width:32px;
height:32px;
background: url(../imagens/tempo_get.png) no-repeat;
background-position: center;
}

/*** clear ***/

#clear{
clear:both;
}

/***IE hack***/

<!--[if IE]>
<style type="text/css">
p.iepara{ /*Conditional CSS- For IE (inc IE7), create 1em spacing between menu and paragraph that follows*/
padding-top: 1em;
}
</style>
<![endif]-->



html





<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">

<title>barra</title>

<link rel="stylesheet" href="stylo/all.css" type="text/css" />

</head>

<body>

<div id="todo">

<div id="fundo">

   <div id="topo">

       <div id="menusuper">

       	<div id="wrapper">

           <div id="menu">
               <ul>
                   <li class="left"> </li>
                   <li><em></em><a href="#">Home</a></li>
                   <li><em></em><a href="#">Loja</a></li>
                   <li><em></em><a href="#">Jogos Online</a></li>
                   <li><em></em><a href="#">Jogos Rede</a></li>
                   <li><em></em><a href="#">Serviços</a></li>
                   <li><em></em><a href="#">Sobre Nós</a></li>
                   <li><em></em><a href="#">Contato</a></li>
                   <li class="sep"> </li>
                   <li class="right"> </li>
               </ul><!--/ul-->
           </div><!--/menu-->

       	</div><!--/wrapper--> 

       </div><!--/menu superior-->

       <div id="logo">

         <div id="logotipo"></div><!--/logotipo-->

       </div><!--/logo-->

	<div id="infmenu">

       <div id="wrapperinf">  

           <div id="menuinf">
               <ul>
                   <li class="leftinf"> </li>

				<li><em></em><a href="http://orkut.com.br/" class="orkut"></a></li>

                   <li><em></em><a href="http://hotmail.com/" class="msn"></a></li>

                   <li><em></em><a href="http://www.facebook.com/" class="face"></a></li>

				<li><em></em><a href="http://twitter.com/" class="twitter"></a></li>

				<li><em></em><a href="http://br.myspace.com/" class="myspace"></a></li>

                   <li><em></em><a href="http://youtube.com/" class="youtube"></a></li>

                   <li><em></em><a href="http://br.play.yahoo.com/games/login?game=Pool" class="sinuca"></a></li>

                   <li><em></em><a href="http://tempoagora.uol.com.br/previsaodotempo.html/brasil/PraiaGrande-SP/" class="tempo"></a></li>

                   <li class="sepinf"> </li>

                   <li class="rightinf"> </li>
               </ul> <!--/ul-->

           </div><!--/menuinf-->

	</div><!--/wrapperinf-->

       </div><!--/infmenu-->

   </div><!--/topo--> 

</div><!--/fundo-->

</div><!--/todo-->

</body><!--/body-->

</html><!--/hmtl-->

Guilherme Oderdenge · Janeiro 29, 2012

Ora, o hover está certo, o que está errado é a imagem dele.

Veja o seguinte: na imagem natural (sem hover) está funcionando corretamente porque a imagem por si só já possui o ícone. O seu hover não possui ícone algum, ou seja, ele vai sobrepor a imagem natural, removendo o ícone e fazendo com que o efeito não saia como o desejado.

Quer uma dica? Faça uma imagem natural para o fundo do menu (sem ícone), e mantenha a imagem do hover como está. Aí, ao invés de fazer um background diferente para cada menu com ícone, insira os ícones como se fossem imagens e o hover um PNG sobreposto.

Vai deixar seu código mais leve, limpo e reutilizável.

Se tiver dúvida ou precisar de ajuda, dê um toque. Estamos aqui pra isso. :thumbsup:

GILALKMIN · Janeiro 29, 2012

Boa tarde Guilherme...

Me perdoe a ignorancia... mas não entendi direito o que você me sugeriu.

eu coloquei os icones direto no html como exemplo abaixo:

funcionou perfeitamente com efeito que esperava, porém no IE os icones ficam horriveis... com uma aparecia terrivel, borda cerrilhada, etc... (Infelismente, como o IE é a maior porcaria que existe e a mais usada...)

tive também uma experiencia com o sprite... mas ja estou alterando pq tive problemas com ele tbm...

se tiver alguma sugestão que possa me ajudar deste ja agradeço...

GIL

Guilherme Oderdenge · Janeiro 29, 2012

O que você fez acima:

<li><em></em><a href="#"><img src="imagens/orkut_get.png" alt="Orkut" /></a></li>

Foi exatamente o que eu disse para você fazer.

Para cada ícone diferente, você estava utilizando uma classe. E isso, para este caso, é além de desnecessário, invalido.

Então, em sumo, o seu erro foi solucionado em todos os browsers, menos no IE, correto?

Se sim, por favor, poste uma imagem de como fica no IE. Porque eu tentei acesasr o endereço que você passou por aqui e o erro persiste no Chrome.

E ah: utilizar sprites para imagem natural/imagem hover é a melhor coisa que existe, sabia? Você carrega duas imagens de uma vez só, fazendo com que o hover não fique sem um "background" quando o usuário passar o mouse caso a imagem do hover não seja carregada.

Por falar nisso, qual o problema que você teve? :huh:

Abraços! :thumbsup:

GILALKMIN · Janeiro 29, 2012

Ola Guilherme, mexi no codigo basicamente, fazendo limpeza de comentarios enfim... mas sem mudanças profundas

ao invés de postar uma imagem... eu subi um novo link totalmente diferente, para que se possamos ver as diferenças

link demonstrativo

Segue o codigo abaixo

body{
margin: 0 auto 0 auto;
padding: 0 0;
}

#todo{
margin: 0 auto 0 auto;
width: 1000px;
height:auto;
position:relative;
padding: 0 0;
}

#fundo{
background: url(../imagens/fundoazulclaro.png);
padding: 0 0;
margin: 0 auto 0 auto;
width:1000px;
height:1500px;
position:absolute;
}

#topo{
margin: 0 auto 0 auto;
padding:0 0;
width:1000px;
height:500px;
position:absolute;
left: 0px;
}


#wrapper {
display: block;
width: 1000px;
margin: 0px auto;
font: 100%/1.25 arial, helvetica, sans-serif;
   color: #000000;
}


#menu{ 
display: block;
   text-align: center;
   font-size: 120%;
   text-decoration: none;
position:absolute;     

}

#menu ul { 
width: 1000px; 
   height: 40px;
margin: 0 auto;
padding: 0;
line-height: 40px; 
text-decoration: none;
   background:url(../imagens/menu_bg.jpg) repeat-x left top;
}


#menu ul li.left {
display: block;
float: left;
clear: left;
width: 65px;
height: 40px;
   background:url(../imagens/menu_l.jpg) no-repeat left top;
}


#menu ul li.right {
display: block;
float: right;
clear: right;
width: 40px;
height: 40px;
   background:url(../imagens/menu_r.jpg) no-repeat right top;
}

#menu ul li { 
width: auto;
display: inline;
float: left;
list-style: none;
text-align: center;
text-decoration: none;
}

#menu ul li a { 
display: block;
text-decoration: none;
text-transform: inherit;
padding: 0 25px;
color: #CCCCCC;
}

#menu ul li em {
display: block;
float: left;
width: 2px;
height: 40px;
   background:url(../imagens/menu_sep.jpg) no-repeat left top;
}


#menu ul li.sep {
width: 2px;
   background:url(../imagens/menu_sep.jpg) no-repeat left top;
}

#menu ul li a:hover, #menu ul li a:active { 
background: url(../imagens/menu_over.jpg) repeat-x center top;
text-decoration: none;
Color: white;
}

#menu ul li a:active {
font-weight: bold;
cursor: default;
}


#logo{
width:1000px;
height:140px;
top:45px;
left:0px;
position:absolute;
alignment-adjust:central;
}

#logotipo{
width:760px;
height:135px;
top:45px;
left:120px;
position:absolute;
alignment-adjust: central;
}


#wrapperinf {
display: block;
width: 1000px;
margin: 0px auto;
font: 100%/1.25 arial, helvetica, sans-serif;
   color: #000000;
}

#menuinf{
display: block;
text-align: center;
font-size: 120%;
text-decoration: none;
position:absolute;
float:right;
top:200px;

}

#menuinf ul { 
width: 1000px; 
   height: 40px;
margin: 0px auto;
padding: 0;
line-height: 40px; 
text-decoration: none;
   background:url(../imagens/menu_bg.jpg) repeat-x left top;

}


#menuinf ul li.leftinf {
display: block;
float: left;
clear: left;
width: 105px;
height: 40px;
   background:url(../imagens/menu_l.jpg) no-repeat left top;
}


#menuinf ul li.rightinf {
display: block;
float: right;
clear: right;
width: 40px;
height: 40px;
   background:url(../imagens/menu_r.jpg) no-repeat right top;
}

#menuinf ul li { 
width: auto;
display: inline;
float: left;
list-style: none;
text-align: center;
text-decoration: none;
}

#menuinf ul li a { 
display: block;
text-decoration: none;
text-transform: inherit;
padding: 04px 33px;
color: #CCCCCC;
}

#menuinf ul li em {
display: block;
float: left;
width: 2px;
height: 40px;
   background:url(../imagens/menu_sep.jpg) no-repeat left top;
}


#menuinf ul li.sepinf {
width: 2px;
   background:url(../imagens/menu_sep.jpg) no-repeat left top;
}

#menuinf ul li a:hover, #menuinf ul li a:active { 
background: url(../imagens/menu_over.jpg) repeat-x center top;
text-decoration: none;
Color: white;
}

#menuinf ul li a:active {
font-weight: bold;
cursor: default;
}


.orkut{
width:32px;
height:32px;
background: url(../imagens/orkut_get.png) no-repeat;
background-position: center;
}


.msn{
width:32px;
height:32px;
background: url(../imagens/msn_get.png) no-repeat;
background-position: center;
}

.face{
width:32px;
height:32px;
background: url(../imagens/face_get.png) no-repeat;
background-position: center;
}

.twitter{
width:32px;
height:32px;
background: url(../imagens/twitter_get.png) no-repeat;
background-position: center;
}

.myspace{
width:32px;
height:32px;
background: url(../imagens/myspace_get.png) no-repeat;
background-position: center;
}

.youtube{
width:32px;
height:32px;
background: url(../imagens/youtube_get.png) no-repeat;
background-position: center;
}

.sinuca{
width:32px;
height:32px;
background: url(../imagens/sinuca_yahoo_get.png) no-repeat;
background-position: center;
}

.tempo{
width:32px;
height:32px;
background: url(../imagens/tempo_get.png) no-repeat;
background-position: center;
}

.clear{
clear:both;
}


[if IE]>
<style type="text/css">
p.iepara{ 
padding-top: 1em;
}
</style>
<![endif]



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>barra teste - IE</title>

   <link rel="stylesheet" href="stylo/all.css" type="text/css" />

</head>

<body>
<div id="todo">
<div id="fundo">
   <div id="topo">
	<div id="wrapper">

           <div id="menu">
               <ul>
                   <li class="left"> </li>
                   <li><em></em><a href="#">Home</a></li>
                   <li><em></em><a href="#">Loja</a></li>
                   <li><em></em><a href="#">Jogos Online</a></li>
                   <li><em></em><a href="#">Jogos Rede</a></li>
                   <li><em></em><a href="#">Sobre Nós</a></li>
                   <li><em></em><a href="#">Serviços</a></li>
                   <li><em></em><a href="#">Contato</a></li>
                   <li class="sep"> </li>
                   <li class="right"> </li>
               </ul><!--/ul-->
           </div><!--/menu-->

       </div><!--/wrapper--> 

	<div id="logotipo"></div><!--/logotipo-->

	<div id="wrapperinf">

           <div id="menuinf">
               <ul>
                   <li class="leftinf"> </li>
                   <li><em></em><a href="#"><img src="imagens/orkut_get.png" alt="Orkut" /></a></li>
                   <li><em></em><a href="#"><img src="imagens/msn_get.png" alt="MSN" /></a></li>
                   <li><em></em><a href="#"><img src="imagens/face_get.png" alt="Facebook" /></a></li>
                   <li><em></em><a href="#"><img src="imagens/twitter_get.png" alt="Twitter" /></a></li>
                   <li><em></em><a href="#"><img src="imagens/myspace_get.png" alt="My Space" /></a></li>
                   <li><em></em><a href="#"><img src="imagens/youtube_get.png" alt="You Tube" /></a></li>
                   <li><em></em><a href="#"><img src="imagens/sinuca_yahoo_get.png" alt="Sinuca Yahoo" /></a></li>
                   <li><em></em><a href="#"><img src="imagens/tempo_get.png" alt="Tempo"/></a></li>
                   <li class="sepinf"> </li>
                   <li class="rightinf"> </li>
               </ul><!--/ul-->

           </div><!--/menu-->

     </div><!--/wrapper-->



</div><!--/topo-->

</div><!--/fundo-->	
</div><!--/todo-->
</body>
</html>

Guilherme Oderdenge · Janeiro 29, 2012

Aqui funcionou perfeitamente - tanto no IE quanto no Chrome e Firefox. Você ainda está tendo problemas?

GILALKMIN · Janeiro 30, 2012

Sim... mas apenas no IE, os icones ficam serrilhados, com marcas (um quadradinho marcando a imagem) e quando se faz o efeito hover ficam mais evidentes...

Acabei de fazer um teste do IETester...

IE5: Bordas Rochas sem transparenica;

IE6: Bordas Rochas sem transparencia;

IE7: Bordas Azul e quando clicadas rochas com transparecia;

IE8: Bordas Brancas/Cinzas, com aumento de brilho na borda devido ao efeito hover com transparencia;

IE9: Bordas Brancas/Cinzas, com aumento de brilho na borda devido ao efeito hover com transparencia (esse ultimo testado em manquina com IE 9 64bits;

em outros browsers, fica perfeito (Opera, Firefox, Chrome).

Guilherme Oderdenge · Janeiro 30, 2012

Para remover a borda, basta, no CSS, dar: border: 0px;.

Entendeu?

Diéssica · Janeiro 30, 2012

Para remover a borda, basta, no CSS, dar: border: 0px;.

Entendeu?

Sem px.

border:0;

Apesar de parecer fútil, o px (pixels) em uma propriedade com valor zero é barrado pela W3C na validação, acredite! :(

GILALKMIN · Janeiro 30, 2012

Nossa tão simples e eu bati cabeça pra tudo que é lado....

Guilherme obrigado pela ajuda..

valeu mesmo...

Sem px.
border:0;
Apesar de parecer fútil, o px (pixels) em uma propriedade com valor zero é barrado pela W3C na validação, acredite! :(

obrigado pela ajuda...

Arquivado

[Resolvido] hover nao funciona como deveria

Recommended Posts

GILALKMIN 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Guilherme Oderdenge 42

Compartilhar este post

Link para o post

Compartilhar em outros sites

GILALKMIN 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Guilherme Oderdenge 42

Compartilhar este post

Link para o post

Compartilhar em outros sites

GILALKMIN 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Guilherme Oderdenge 42

Compartilhar este post

Link para o post

Compartilhar em outros sites

GILALKMIN 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Guilherme Oderdenge 42

Compartilhar este post

Link para o post

Compartilhar em outros sites

Diéssica 140

Compartilhar este post

Link para o post

Compartilhar em outros sites

GILALKMIN 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

recuperando parametros simplexml_load_file

PHP+Codeigniter - Adicionar Registro Plano de Contas

Javascript - Passar Parâmetros para uma Função.

Fóruns

Tempo Real

Informação importante