Dúvida com JavaScript

Front-end
#1

Pessoal, estou fazendo um menu simples com css e javascript
Gostaria de que quando a pessoa passar o mouse sobre o item, além de descer os subitens, o fundo mudar de cor.
A parte de fazer descer os subitens está funcionando perfeitamente, só não estou conseguindo é mudar o fundo do menu :S

onmouseover=function() {this.getElementsByTagName('ul')[0].style.display="block";this.style.backgroundColor = "#dbdbf2";this.style.background = "background-image: none"}

como posso fazer isso?

#2

Se vc aceitar uma dica usa jquery vc faz isso com poucos caracteres, qlq dúvida quanto ao uso dele posta ai, att

#3

Ok Ok…
tenho que instalar algum plugin, algo do tipo?

#4

Não somente baixe o jquery.js e pronto está pronto pra usar.

#5

Pra inserir o jQuery na sua página você pode usar diretamente o no head da sua página, assim vai utilizar o arquivo hospedado na CDN da Google. Além disso, você também pode baixar o jQuery em http://jquery.com, o site também traz uma boa documentação (em inglês).

Depois você adiciona uma outra tag script e chama o seu arquivo js ou insere ali dentro mesmo seus comandos.

Uma forma simples do jQuery de manipular hover é com o método .hover()

Para aplicar um mouse over e mouse leave com o jQuery já tenho algo escrito em: http://yayquery.com.br/desenvolvimento/por-hover-melhor/

#6

[quote=Thiago Siqueira]Pessoal, estou fazendo um menu simples com css e javascript
Gostaria de que quando a pessoa passar o mouse sobre o item, além de descer os subitens, o fundo mudar de cor.
A parte de fazer descer os subitens está funcionando perfeitamente, só não estou conseguindo é mudar o fundo do menu :S

onmouseover=function() {this.getElementsByTagName('ul')[0].style.display="block";this.style.backgroundColor = "#dbdbf2";this.style.background = "background-image: none"}

como posso fazer isso?[/quote]

Olá, Thiago Siqueira,

Talvez você já tenha solucionado seu problema com jQuery, mas, ainda assim, respondo sua pergunta utilizando javascript puro.

Primeiro, você precisa saber como funciona o background na CSS 2.1, para então, mexer corretamente nele. O background é composto pelas seguintes propriedades:

background-color
background-image
background-repeat
background-attachment
background-position

Para maiores esclarecimentos, segue o link: http://www.w3schools.com/css/css_background.asp

No código que você declarou, você setou a propriedade “backgroundColor” e logo em seguida, setou a propriedade “background”. Assim, você acabou de descartar a cor inserida anteriormente, pois, a propriedade “background” existe para você declarar de uma vez só, todas as propriedades referentes a background. Como segue abaixo, exemplo:

this.style.background = “#FFFFFF url(’/img/photo.gif’) left top repeat-x”;

Sendo assim, se fizesse a sua declaração como segue abaixo, funcionaria.

Espero ter ajudado.

Abraço!

#7