JQuery .mouseover e .mouseout mudam a cor da fonte - javascript, jquery, html, css, fontes

Eu sou novato em JQuery e tento fazer algunstruques básicos com ele. Então, basicamente, eu tenho uma navegação simples feita de lista não ordenada e quero mudar a cor da fonte no item da lista com o mouse tocado no momento com JQuery, mas tenho problemas porque meu script JQuery está mudando a cor da fonte de todos os itens da lista, e eu quero alterar a cor da fonte SOMENTE do item da lista com o mouse sobre o mouse, não todos. Tentei obter um item da lista com o mouse, mas não sei como implementá-lo para que meu JQuery altere apenas esse item da lista. Aqui estão as fotos:

O que eu tenho atualmente: http://i.imgur.com/8vWcOci.jpg
O que eu quero: http://i.imgur.com/4yD0bIc.jpg

Aqui está meu código JQuery:

$(document).ready(
function(){
$(".nav1 ul li").mouseover(
function () {
var index = $( ".nav1 ul li" ).index(this);
$(".nav1 ul li a").css({"color":"white"});
}
);
$(".nav1 ul li").mouseout(
function () {
var index = $( ".nav1 ul li" ).index(this);
$(".nav1 ul li a").css({"color":"#6291d8"});
}
);
}
);

Aqui está o meu HTML:

<nav class="nav1">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">THERAPIES</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">BOOKING</a></li>
<li><a href="#">CONTACT</a></li>
<li><a href="#">ABOUT ME</a></li>
</ul>
</nav>

Respostas:

2 para resposta № 1

Ao invés de:

$(".nav1 ul li a").css({"color":"white"});

e:

$(".nav1 ul li a").css({"color":"#6291d8"});

usar:

$(this).css({"color":"white"});
$(this).css({"color":"#6291d8"});

se você deseja aplicar css na tag achor:

$(this).find("a").css({"color":"white"});
$(this).find("a").css({"color":"#6291d8"});

Usando $(".nav1 ul li a") você está mudando todas as tags âncora CSS, mas usando $(this) irá alterar o css do elemento clicado atual.

---

1 para resposta № 2

Por quê JQuery?

usar a:hover dentro css é muito mais limpo.

Gostar:

.nav1 ul li a {
color: #6291d8;
}
.nav1 ul li a:hover{
color:white;
}

Para todos os outros links, você pode usar novamente a e a:hover Além disso a:active fornecerá funcionalidades adicionais.

---

1 para resposta № 3

this é uma palavra especial em JavaScript que se refere ao elemento que dispara um evento. Em jQuery você pode usar $(this). Assim, você pode substituir seu código por:

$(document).ready(function () {
$(".nav1 ul li a").hover(function () {
$(this).css("color", "white");
}, function () {
$(this).css("color", "#6291d8");
});
});

exemplo de jsFiddle

Observe que também mudei o seletor para ".nav1 ul li a". As âncoras têm seu próprio estilo padrão, portanto, para substituí-las, você deve direcioná-las, e não o item da lista pai. Eu também substituí o seu mouseover e mouseout com o hover método, uma vez que salva alguns caracteres. Por fim, usei a versão de propriedade única mais básica de .css() que também salva alguns caracteres.

---

1 para resposta № 4

Não há necessidade de JS aqui. Você pode usar o CSS :hover classe psuedo:

.nav1 ul li a {
color: #6291d8;
}
.nav1 ul li a:hover {
color: #FFF;
}

Exemplo de violino

---