Currently, I am utilizing a basic script to alter the color of elements based on the div being hovered over. While this works smoothly in one direction down the line, when trying to reverse order and backtrack, the colors do not function as intended.
The objective is to have all elements, except the one being hovered over, change to the same color. The hovered-over div should default to light grey. Below are two functions, with potential for more:
$('#red').mouseover(function(){
$(this).add("#content").removeClass();
$("#content, nav div").not(this).addClass("red");
});
$("#blue").mouseover(function(){
$(this).add("#content").removeClass();
$("#content, nav div").not(this).addClass("blue");
});
To view the entire process in action, visit this jsfiddle link: http://jsfiddle.net/8bchybrr/
Thank you... (also, I understand that this JavaScript code is quite messy and inefficient. Besides creating another function to handle redundant parts, I'm unsure how to condense it further)
---
Solution - All I needed to do was include:
$("#content, nav div").removeClass();
within every function call, as failing to do so results in class buildup and conflicts. It seems somewhat trivial now... I mistakenly thought I was already doing this. Appreciate the help!