como faco esse efeito ?

[NetBoy16 72]

Fala pessoal, beleza?

 

Eu to tentando fazer o seguinte efeito, quando o cara passar o mouse no link do menu mudar a cor da fonte do link e mudar o background do li em que este link está, já tentei de 2 formas:

 

#menu ul li a:hover li {propriedades} e dando uma classe àquele li e no lugar do último li colocar o .nomeclasse

 

mas nenhum dá certo, muda a cor do link mas nao mudar o bg do li, oque eu faco ? como eu faco ?

 

PS: os 2 li's se referem ao mesmo li.

[Mateus Avila Isidoro 8]

#menu ul li a:hover li a {propriedades}

 

Para mudar a cor do texto de um link, precisa setar o link. Tu esqueceu o a no fim. Sem isso, tu só edita o estilo do texto (sem link).

[NetBoy16 72]

#menu ul li a:hover li a {propriedades}

 

Para mudar a cor do texto de um link, precisa setar o link. Tu esqueceu o a no fim. Sem isso, tu só edita o estilo do texto (sem link).

 

nao, você n entendeu ,-,

 

olha o codigo:

 

#menu {
           background: url(../images/bgmenu.png) no-repeat;
           width: 800px;
           height: 62px;
           position: relative;
           top: 276px;
       }
           #menu ul {
               width: 745px;
               margin: auto;
               position: relative;
               top: 20px;
           }
               #menu ul li {
                   float: left;
                   margin-left: 30px;
               }
                   #menu ul li a {
                       font-size: 20px;
                       color: black;
                   }
                   #menu ul li a:hover {
                       font-size: 22px;
                       font-weight: bold;
                       color: white;                        
                   }
                   #menu ul li a:hover li {
                       background: url(../images/bgmenuativo.png) no-repeat;
                   }

 

explicando:

 

#menu eh a div que comportará o menu em si

ul é o menu e entao estilizo ele em #menu ul

li sao os itens do menu entao estilizo ele em #menu ul li

estilizo o link que esta nos itens do menu em #menu ul li a

quando passar o mouse no link estilza o proprio link e o li que serve de container para esse link, entao eu fiz #menu ul li a:hover para estilizar o link ao passar do mouse e #menu ul li a:hover li para estilizar o li que serve de container do link ao passar o mouse nesse link.

 

Ou seja, eu nao quero estilizar o li que estaria dentro do a, mas sim o li no qual o a está dentro, entendeu ?

[André do Vale 76]

Faça o hover no li então. Caso o seletor não funcione em algum IE, utilize o JS selectivizr.

 

li:hover

[Thiago Moraes 32]

Não sei se entendi exatamente o que você precisa, mas tenta isso:

 

                   #menu ul li a {
                       font-size: 20px;
                       color: black;
                       display: block;

                   }
                   #menu ul li a:hover {
                       font-size: 22px;
                       font-weight: bold;
                       color: white; 
                       background: url(../images/bgmenuativo.png) no-repeat;                       

[NetBoy16 72]

eu pensei nisso, mas dai complica pois pra mudar a cor do texto o cara tem que passar o mouse em cima do link e pra mudar a cor de fundo o cara tem que passar o mouse em cima da li, eu queria que quando passase o mouse no link mudasse a cor do link e o fundo da li, nao do texto, pois se for do texto n vai ficar com a altura do ul/li

[André do Vale 76]

li:hover {background:red} li:hover a {color:pink}

 

ou

 

li:hover {background:red} li a:hover {color:pink}

 

Isto?

[Thiago Moraes 32]

eu pensei nisso, mas dai complica pois pra mudar a cor do texto o cara tem que passar o mouse em cima do link e pra mudar a cor de fundo o cara tem que passar o mouse em cima da li, eu queria que quando passase o mouse no link mudasse a cor do link e o fundo da li, nao do texto, pois se for do texto n vai ficar com a altura do ul/li

 

 

você pensou, mas testou? se você usar display block no link e definir um tamanho, usando padding por exemplo, deve resolver o problema. Se não resolver fala o que deu errado.