I have a navigation menu link with an ID #navigation li a and a description with a class .menu-description. I would like to update the class from .menu-description to .menu-descriptionnew whenever a user hovers over #navigation li a.
Here is my current jQuery code:
<script>
$(document).ready(function() {
$('#navigation li a').mouseover(function() {
//Check if element with class exists, if so change it to new
if ($('div.menu-description').length != 0)
$('div.menu-description').removeClass('menu-description').addClass('menu-descriptionnew');
//Check if element with class 'menu-descriptionnew' exists, if so change it to 'menu-description'
else if ($('div.menu-descriptionnew').length != 0)
$('div.menu-descriptionnew').removeClass('menu-descriptionnew').addClass('menu-description');
});
});
</script>
Unfortunately, this code is not functioning as expected. Any suggestions on how to fix it? Thank you!