Seeking assistance with a jQuery issue - can anyone spare some time to help me out?
I am attempting to change the background of a parent element when its child is hovered over, and then revert back to its default when the child's hover ends.
The current problem I am facing is that my script does not return the background color to its default state from the CSS file; when the hover is lost, the parent's background remains the altered color.
The jQuery code:
$(document).ready(function() {
$('ul.sf-menu li li li').hover(function() {
var currentID = "#";
currentID += $(this).parent().parent().attr('id');
$('ul.sf-menu li li ul').parent(currentID).css('background', 'pink');
$('ul.sf-menu li li li').focusout().css('background', '#00467F');
});
});
The HTML markup:
<ul class="sf-menu">
<li id='education'><a>Education</a>
<ul>
<li class='education' id='6'><a href='#' title='Desktops'>Desktops</a>
<ul>
<li class='education2'><a href='#' title='#'>#</a></li>
<li class='education2'><a href='#' title='#'>#</a></li>
<li class='education2'><a href='#' title='#'>#</a></li>
</ul>
</li>
<li class='education' id='9'><a href='#' title='#'>#</a>
<ul>
<li class='education2'><a href='#' title='#'>#</a></li>
</ul>
</li>
<li class='education' id='11'><a href='#' title='#'>#</a>
<ul>
<li class='education2'><a href='#' title='#'>#</a></li>
</ul>
</li>
<li class='education' id='14'><a href='#' title='#'>#</a>
<ul>
<li class='education2'><a href='#' title='#'>#</a></li>
<li class='education2'><a href='#' title='#'>#</a></li>
<li class='education2'><a href='#' title='#'>#</a></li>
<li class='education2'><a href='#' title='#'>#</a></li>
</ul>
</li>
</ul>
</li>
</ul>
Appreciate any insights on this issue. Thank you in advance!