Ir para conteúdo
Fórum Script Brasil
  • 0

hover não funciona como deveria


Gilalkmin

Pergunta

Boa tarde 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://strikelanhouse.com.br/teste/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-->

Link para o comentário
Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

  • 0

Olá Gilalkmin!

Esse brilho que fez, é apenas uma imagem com mais brilho sobre a outra, ou é um javascript?

É que o código postado por você é imenso, fica difícil averigüar.

Mas, se for uma imagem, obviamente a imagem ativada pelo over está sobre a outra, sendo assim... cobrindo.

Caso seja isso, use "z-index".

Dê um valor maior para os ícones no menu; exemplo:

<img src="icones_menu.jpg" style=" z-index: 3;">

<img src="brilho.jpg" style=" z-index: 2;">

<img src="menu.jpg" style=" z-index: 1;">

Assim ficará como quer, porém, o ícone não terá brilho, só se a imagem tiver transparência (PNG).

É mais fácil fazer a imagem de brilho com o ícone logo...

Novamente, se isso for imagem.

Mas, de todo modo, use javascript, é mais funcional.

Abraços! ^_^

Editado por Cutthroat
Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,3k
×
×
  • Criar Novo...