Hi there, I'm new to JQuery and trying to experiment with some basic functionalities. I have a simple navigation menu created using an unordered list, and I want to change the font color of the currently hovered list item using JQuery. However, I've run into an issue where my JQuery script is changing the font color of all list items instead of just the one being hovered over. I've tried to find a solution by targeting the currently hovered item, but I'm unsure how to implement it correctly so that only that specific list item's font color changes. Here are visual references for better understanding:
Current state: https://i.sstatic.net/AhUrs.jpg
Desired outcome: https://i.sstatic.net/1rTUV.jpg
Below is the JQuery code I'm using:
$(document).ready(
function(){
$('.nav1 ul li').mouseover(
function () {
var index = $(this).index();
$('.nav1 ul li a').css({"color":"white"});
}
);
$('.nav1 ul li').mouseout(
function () {
var index = $(this).index();
$('.nav1 ul li a').css({"color":"#6291d8"});
}
);
}
);
And here is the corresponding HTML markup:
<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>