JQuery .mouseover and .mouseout change font color

Vote count:

0

I am newbie to JQuery and I try to make some basic tricks with it. So basicly, I have simple navigation made of unordered list, and I want to change font color on currently mouseover-ed list item with JQuery, but I have problem because my JQuery script is changing font color of all list items, and I want to change font color of ONLY currently mouseover-ed list item, not all. I tried to get currently mouseover-ed list item, but I don't know how to implement it so that my JQuery change only that list item. Here are pictures:

What I currently have: http://ift.tt/1haPQIq

What I want: http://ift.tt/1haPS3c

Here is my JQuery code:

$(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"});
                }
            );
        }
);

Here is my 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>

asked 41 secs ago

Mahir Duraković

22