I have 5 or 6 ID's and I need to compress .hover
jQuery into smaller amounts. I tried this answer, but due to how he needed only 1 "group" inside the .hover
function, it makes mine not work because I need a way to have 2 "groups" inside the function.
$(document).ready(function(){
$("#menuicon").click(function(){
$("#menuicon").addClass("gn-selected");
$("#menuwrapper").addClass("gn-open-all");
});
$("#menuicon").hover(function(){
$("#menuicon").addClass("gn-selected");
$("#menuwrapper").addClass("gn-open-all");
}, function(){
$("#menuicon").removeClass("gn-selected");
$("#menuwrapper").removeClass("gn-open-all");
});
$("#menuwrapper").hover(function(){
$("#menuicon").addClass("gn-selected");
$("#menuwrapper").addClass("gn-open-all");
}, function(){
$("#menuicon").removeClass("gn-selected");
$("#menuwrapper").removeClass("gn-open-all");
});
$(".gn-scrollbar").hover(function(){
$("#menuicon").addClass("gn-selected");
$("#menuwrapper").addClass("gn-open-all");
}, function(){
$("#menuicon").removeClass("gn-selected");
$("#menuwrapper").removeClass("gn-open-all");
});
$(".gn-menu").hover(function(){
$("#menuicon").addClass("gn-selected");
$("#menuwrapper").addClass("gn-open-all");
}, function(){
$("#menuicon").removeClass("gn-selected");
$("#menuwrapper").removeClass("gn-open-all");
});
});
The gn-selected and gn-open-all is just part of my CSS it uses transformX to update the height and width in a responsive way.
gn-selected
andgn-open-all
classes have, visually or functionally? In other words, why are you doing this? (Feel free to clarify by editing the answer, possibly by including a live demonstration using Ctrl-M.) \$\endgroup\$