I am just beginning my journey as a web designer and currently delving into the world of JavaScript for enhancing website functionality. While working on my latest project, I encountered a challenge. I wanted to create a menu where specific elements would be highlighted on hover and click.
function hoverAndActive(firstElement, secondElement){
$(firstElement, secondElement).hover(function(){
$(firstElement, secondElement).toggleClass("hoverMenu");
}).mousedown(function(){
$(firstElement, secondElement).addClass("activeMenu");
}).mouseup(function(){
$(firstElement, secondElement).removeClass("activeMenu");
}).mouseleave(function(){
$(firstElement, secondElement).removeClass("activeMenu")
});
}
hoverAndActive("#home","#hometext");
hoverAndActive("#bio","#biotext");
hoverAndActive("#contact","#contacttext");
I am trying to streamline the hover and mouseclick functionality for each menu item. Although I managed to achieve this by duplicating code in the function, I'm looking for a way to write the functionality once and simply input the IDs for each menu item. I prefer using JS over CSS as each pair of IDs is located in very different sections of the html.
Appreciate your assistance :)
Asger Kjeldsen
Edit: Added # to the functions. Clarification
Edit: adding HTML:
<div id="navigation">
<div id="menu">
<a href="#BodyHead"><div id="home" class="button"><img src="img/home.png"></div></a>
<a href="#Test"><div id="bio" class="button"><img src="img/bio.png"></div></a>
<a href="#"><div id="contact" class="button"><img src="img/contact.png"></div></a>
</div>
<div id="menutext">
<a href="#BodyHead"><div id="hometext" class="button"><p>HJEM</p></div></a>
<a href="#Test"><div id="biotext" class="button"><p>BIOGRAFI</p></div></a>
<a href="#"><div id="contacttext" class="button"><p>KONTAKT</p></div></a>
</div>
</div>