I'm currently seeking assistance with a problem I've encountered while attempting to change the backgroundPosition of a block element when a specific link from a list is hovered over. I am looking for a solution that can be implemented in an external .js file, as inline JS appears messy and unprofessional in my opinion. Unfortunately, I am not comfortable using jQuery at this time and need a more complex solution than CSS-only methods allow due to separated elements.
Ideally, I would like to implement an if-else statement to achieve this. The desired functionality should look something like this:
var block = document.getElementById('block');
if (onmouseover *link1*) {
block.style.backgroundPosition='-200px 0px';
} else if (onmouseover *link2*) {
block.style.backgroundPosition='-400px 0px';
} else if (onmouseover *link3*) {
block.style.backgroundPosition='0px -200px';
}
If additional code sections are required, I will gladly provide them. Thank you in advance!
EDIT: Just to clarify, I am not asking for an entire JS program, just guidance on how to set up the if statement to recognize when an element is being moused-over and adjust another element accordingly. So far, my attempts have been unsuccessful.