Ir para conteúdo

POWERED BY:

Arquivado

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

MatheusSilva

[Resolvido] Dificuldade efeito hover

Por , em Desenvolvimento frontend

Recommended Posts

MatheusSilva    0

MatheusSilva
Postado

ola

vamos lá.

tenho um menu onde estou definindo que ao ser passado o mouse a:hover ele fique com bg verde.

beleza, ate ai tudo bem.

só que na minha sidebar tenho link com imagens que tambem tao ficando com bg verde, nao sei pq

 

la vai o codigo.

 

index

<!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>Qualitec - Cursos Tecnicos , Soldagem industrial, Cursos profissionalizantes</title>
<!-- SEO-->
<meta name="description" content="Qualitec - Cursos profissionalizantes na area de soldagens industriais" />
<meta name="keywords" content="qualitec, trabalho, cursos profissionalizantes, soldagem industrial, soldagem" />
<link href="estilo.css" rel="stylesheet" type="text/css"  />
<!-- Scripts-->
<script type="text/javascript" src="js-cuber/jquery.js"></script>
<script type="text/javascript" src="js-cuber/swfobject/swfobject.js"></script>
<script type="text/javascript">
   var flashvars = {};
	flashvars.xml = "config.xml";
	flashvars.font = "font.swf";
	var attributes = {};
	attributes.wmode = "transparent";
	attributes.id = "slider";
	swfobject.embedSWF("cu3er.swf", "cu3er-container", "1024", "200", "3", "expressInstall.swf", flashvars, attributes);
</script>

</head>

<body>
<div id="box">
<div id="header">
   	<div id="logo">
           <a href="index.php"><img alt="logo" src="img/logo/logo.jpg" /></a>
       </div><!--Logo -->

       <div id="pesq">
       <form action="pesquisar.php" method="post">
         <table width="40%" border="0" cellpadding="1">
           <tr>
             <td width="10%"><span class="ativo">Pesquisar: </span> </td>
             <td width="20%"><input type="text" name="pesquisa" onfocus="if(this.value=='Pesquisar') this.value='';" value="Pesquisar" /></td>
             <td width="70%"><input name="acao" type="submit" class="btn" value="Pesquisar" /></td>
           </tr>
         </table>
         </form>
       </div><!--pesquisa -->  
   </div><!--header -->

<div id="menu">
<div id="menu">
<?php  $menu = $_GET['pag'];?>
<a href="?pag=home">Home</a>
<img src="img/menu/separador.jpg" align="" />
<a href="?pag=cursos">Cursos</a>
<img src="img/menu/separador.jpg" align="" />
<a href="?pag=metodo" >Metodo</a>
<img src="img/menu/separador.jpg" align="" />
<a href="?pag=localizacao">Localização</a>
<img src="img/menu/separador.jpg" align="" />
<a href="?pag=valores">Valores</a>
<img src="img/menu/separador.jpg" align="" />
<a href="?pag=contato">Contato</a>
</div><!--menu -->


<!-- clear -->
<div id="clear">
</div>
<!-- fim clear -->

<!--slider-->
<div id="cu3er-container">
   <a href="http://www.adobe.com/go/getflashplayer">
       <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
   </a>
</div>
<!-- fim slider -->

<!-- clear -->
<div id="clear">
</div>
<!-- fim clear -->



<div id="content">


       <div id="conteudo">
<?php include("functions/function_querystring.php");
QueryString($_GET['pag'], 'home', 'arquivos');
?>

       </div><!--conteudo -->


       <div id="sidebar">
<h1>Algumas coisas</h1>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis eleifend velit. Quisque varius malesuada bibendum. Etiam in quam eget nibh fringilla hendrerit. Ut elementum dui quis erat pellentesque nec faucibus est cursus. Quisque molestie tellus ac eros pulvinar in porta neque convallis. Fusce at turpis et odio tempus pretium ut in diam. Donec ac sapien porta nulla semper hendrerit? Donec mattis, quam eget vulputate hendrerit, metus augue faucibus magna; eget dictum nibh nunc quis massa. In at sem nisi. Etiam sit amet odio neque? Nunc viverra viverra nunc.

Nulla sit amet viverra dui. Etiam quis arcu non sapien vulput</p>
 <br />
<br />
<br />

<h1>Redes Sociais</h1>
<div id="redes">
<a href="#"><img src="img/redessociais/twitter.png" /></a>
<a href="#"><img src="img/redessociais/facebook.png" /></a>
<a href="#"><img src="img/redessociais/orkut.png" /></a>
<a href="#"><img src="img/redessociais/youtube.png" /></a>
</div><!-- redes sociais-->



       </div><!--sidebar -->
</div><!--content -->

</div><!-- box-->
<div id="clear"></div><!--clear-->


<div id="footer">
   <div id="news">
   <span>Cadastre-se em nosso sistema de newsletter.</span>
     <form id="form1" name="form1" method="post" action="newsletter/enviar.php" enctype="multipart/form-data">
       <span>Nome:</span>
       <input type="text" name="nome" id="nome" value="Digite seu nome" onfocus="if(this.value=='Digite seu nome') this.value='';" />
       <br />
       <span>Email:</span>
     <input type="text" name="email" id="email" value="Digite um email válido" onfocus="if(this.value=='Digite um email válido') this.value='';" />
     <input type="submit" name="acao" id="btn" value="Cadastrar" />
     <input name="acao" type="hidden" value="Cadastrar" />
     </form></div><!-- newsletter-->



   <div id="footer_cpr">
   <p>2010 - <?php echo date('Y');?> Qualitec© - Cursos Tecnicos de soldagem industrial.</p>
   <p>Todos os Direitos reservados</p>
   </div><!-- cooperaight-->

   </div><!--footer -->

</div><!--footer -->
</div>
</body>
</html>

 

css

/*reset*/
*{margin:0;padding:0px;}


/*Classes Adicionais*/
.ass{float:right; font:10px Verdana, Geneva, sans-serif; color:#CCC}
.ass a{color:#999; font-weight:bolder;}
.clear{clear:both}

/*box*/
#box{width: 1040px; margin:auto}


/*formulario de pesquisa*/
#pesq{float:right; background:#F00; padding-left:10px; -webkit-border-bottom-left-radius:150px;border-bottom-left-radius:150px;width:400px; padding:5px; padding-left:20px;}
.btn{border:0px; background:#e5e5e5;}
#pesq form input{background-color:#FFF; border:1px solid #06C; font:14px "Trebuchet MS", Arial, Helvetica, sans-serif; padding:3px 4px; color:#999}


/*Header*/
#header{height:119px;}
#logo{float:left; padding:20px;}


/*Menu*/
#menu{height:auto; background: url(img/menu/menu.jpg) no-repeat;}
#menu a{text-decoration:none; float:left; color:#FFF; font:18px "Trebuchet MS", Arial, Helvetica, sans-serif;text-align:center;padding-bottom:15px; padding-left:15px; padding-right:12px; padding-top:13px;}
#menu a:hover{background:#0F0 }
#menu img{padding-top:6px;float:left;} 



/*Content*/
#clear{clear:both}
#content{margin-top:10px}
#conteudo{width:780px;padding:5px; text-align:left; font-family: 14px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#333; float:left; margin-right:1px; background:#FFF}
#conteudo h1{font:18px Tahoma, Geneva, sans-serif; color:#069; border-bottom:solid #069 3px; margin:0 0 5px 0; padding:0 0 3px 0; }
#conteudo h2{font: 16px Tahoma, Geneva, sans-serif; color:#CCC; font-weight:bold; }
#conteudo p{margin:10px 0px 10px 0; text-align:justify;}
#conteudo a{color:#06C; text-decoration:none; font-weight:bold;}
#conteudo a:hover{color:#036;}
#sidebar{width:215px; float:right; margin-right:10px; background:#FFF; margin-bottom:20px; border:1px solid #069; padding:5px; font:14px "Palatino Linotype", "Book Antiqua", Palatino, serif; margin-top:0px;}
#sidebar ul li{list-style:none;}
#sidebar .titulo{font:16px Georgia, "Times New Roman", Times, serif; color:#000; border:2px solid #CDCDCD; width:200px;text-align:center;}
#sidebar h1{font:18px Tahoma, Geneva, sans-serif; color:#F90; font-weight:bold; padding:5px; border:1px solid #063; background-color:#CCC; float:left; width:200px}
#redes a{padding:3px;}

/*Footer*/
#news{float:left; height:auto; overflow:auto;width:300px;}
#news span{font: 14px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bolder}
#news form input{background:#F5F5F5; border:1px solid #069; font:Tahoma, Geneva, sans-serif; color:#069;}
#news #btn{font-weight:bolder; color:#000}
#news form span{font: 14px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bolder}
#footer{overflow:auto; background:#0CC;}
#footer_cpr{text-align:right; font:12px Tahoma, Geneva, sans-serif; float:left;font-weight:bolder; height:auto; width:500px;}

 

obrigado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Kaue Machado    0

Kaue Machado
Postado

reparei que você abriu duas div com id="menu", e fechou apenas uma (alias, porque colocar duas tags com o mesmo id uma dentro da outra?). Provavelmente a div que você deixou de fechar está causando o problema, ja que como você nao fechou, as propriedades de estilo dessa id sao aplicadas até o fim da página. Apesar de que cheguei em casa cansado, seu código é extenso então li só a parte do menu, (uma coisa leva a outra e todas levam à preguiça... rsrsrs)

Compartilhar este post

Link para o post
Compartilhar em outros sites

Nandel    1

Nandel
Postado

Voce definiu como

#menu a:hover{background:#0F0 }

ou seja Todo link que estiver dentro do elemento menu tenha essa configuração no hover, mas todo o seu site esta dentro deste elemento.

 

reparei que você abriu duas div com id="menu", e fechou apenas uma (alias, porque colocar duas tags com o mesmo id uma dentro da outra?). Provavelmente a div que você deixou de fechar está causando o problema, ja que como você nao fechou, as propriedades de estilo dessa id sao aplicadas até o fim da página. Apesar de que cheguei em casa cansado, seu código é extenso então li só a parte do menu, (uma coisa leva a outra e todas levam à preguiça... rsrsrs)

 

Ele abre na linha 45 e 46, e fecha 58 e 117, ele da o nome incorreto. A idea era fechar o primeiro div dele chamado box, e o ele fecha no final 2 vezes o footer, que acaba sendo o box e o footer.

 

-----

 

Basta corrigir tais erros e seu link funcionara como o desejado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Kaue Machado    0

Kaue Machado
Postado

Voce definiu como

#menu a:hover{background:#0F0 }

ou seja Todo link que estiver dentro do elemento menu tenha essa configuração no hover, mas todo o seu site esta dentro deste elemento.

 

reparei que você abriu duas div com id="menu", e fechou apenas uma (alias, porque colocar duas tags com o mesmo id uma dentro da outra?). Provavelmente a div que você deixou de fechar está causando o problema, ja que como você nao fechou, as propriedades de estilo dessa id sao aplicadas até o fim da página. Apesar de que cheguei em casa cansado, seu código é extenso então li só a parte do menu, (uma coisa leva a outra e todas levam à preguiça... rsrsrs)

 

Ele abre na linha 45 e 46, e fecha 58 e 117, ele da o nome incorreto. A idea era fechar o primeiro div dele chamado box, e o ele fecha no final 2 vezes o footer, que acaba sendo o box e o footer.

 

-----

 

Basta corrigir tais erros e seu link funcionara como o desejado.

É agora vi o código com mais calma, realmente a tag esta fechada. Mas ainda não entendi o porque de duas tags com id="menu"...

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