Enabling hover and changing active tab color with jquery and css

Question

I'm trying to change the color of a tab in my left nav to change color when it's being hovered on, and to stay that color when it's been selected. I'm a super novice with jquery and css, so any help would be appreciated!

Here is the code:

<script src="https://use.fontawesome.com/b36d34b486.js"></script>
<script type="text/javascript">
var $everything = $("#full-height-container").contents();
var leftnavcurrent = sessionStorage.getItem('leftnavcurrent');
var leftnavhidden;
$everything.find("#splitter-sidebar").css('background','#FFF');
$everything.find("#splitter-sidebar").css('overflow-x','hidden');  
$everything.find("#splitter-sidebar").css('overflow-y','hidden'); 
$(document).ready(function(){
$everything.find(".vsplitbar").css('visibility','hidden'); 
});

$(document).ready(function(){
if(!leftnavcurrent){
$everything.find("#splitter-sidebar").css('width','210px');
}else{
$("#splitter-sidebar").css('width','53px');
$("#left-sidebar2").css('left','-157px');
$("#left-sidebar2").css('position','relative');
var splitterDiv = AJS.$("#splitter");
splitterDiv.trigger("resize", [ 50 ]);
$("#showhidebutton").html('<a href="#" style="text-decoration:none;"     onclick="showhideleftnav()"><i class="fa fa-angle-right" aria-hidden="true"     style="font-size:20px; font-weight:bold;"></i></a>');
$(".lnhover").css('color','#FFF');
}
$(".lnhover").hover(function(){
    $(this).parents(".lnbuttons").css('border-right','5px solid #5382a1');
    $(this).css('color','#3572b0');
    }, function(){
    $(this).parents(".lnbuttons").css('border-right','none');
    $(this).css('color','#333');
    });
}); 

function switchln(){
$("#left-sidebar2").css('visibility','hidden');
var splitterDiv = AJS.$("#splitter");
splitterDiv.trigger("resize", [ 300 ]);
$("#old_ln").css('visibility','visible');
$everything.find("#splitter-sidebar").css('overflow-y','auto'); 
}

function switchlnback(){
$("#old_ln").css('visibility','hidden');
var splitterDiv = AJS.$("#splitter");
splitterDiv.trigger("resize", [ 210 ]);
$("#left-sidebar2").css('visibility','visible');
$everything.find("#splitter-sidebar").css('overflow-y','hidden'); 
}

function showhideleftnav(){
if(!leftnavhidden){
$("#splitter-sidebar").css('width','53px');
$("#left-sidebar2").css('left','-157px');
$("#left-sidebar2").css('position','relative');
var splitterDiv = AJS.$("#splitter");
splitterDiv.trigger("resize", [ 50 ]);
$("#showhidebutton").html('<a href="#" style="text-decoration:none;"     onclick="showhideleftnav()"><i class="fa fa-angle-right" aria-hidden="true"     style="font-size:20px; font-weight:bold;"></i></a>');
$(".lnhover").css('color','#FFF');
leftnavhidden=1;
sessionStorage.setItem('leftnavcurrent', '1');
}else{
$("#splitter-sidebar").css('width','210px');
$("#left-sidebar2").css('left','0px');
var splitterDiv = AJS.$("#splitter");
splitterDiv.trigger("resize", [ 210 ]);
$("#showhidebutton").html('<a href="#" style="text-decoration:none;"     onclick="showhideleftnav()"><i class="fa fa-angle-left" aria-hidden="true"     style="font-size:20px; font-weight:bold;"></i></a>');
$(".lnhover").css('color','');
leftnavhidden=null;
sessionStorage.removeItem('leftnavcurrent');
}
}
</script>

<div id="left-sidebar2" style="width:200px; float:left; margin-right:5px; margin-top:0px;"><div style="border-right:1px solid #e3e3e3;"><ul style="list-style: none; padding-left:0px;"><li class="lnbuttons" style="position: relative; height: 50px; border-bottom: 1px solid #e3e3e3; border-top: 1px solid #e3e3e3; padding:0px;">

<a class="lnhover" href="/display/IASB3/Procedures" style="width:175px; color: #333333; font-size: 12px; text-decoration: none; position: absolute; top: 50%; transform: translateY(-50%); padding-left: 20px;">Procedures (SOPs)</a></li><li class="lnbuttons" style="position: relative; height: 50px; border-bottom: 1px solid #e3e3e3; padding:0px;">

<a class="lnhover" href="/display/IASB3/Reference" style="width:175px; color: #333333; font-size: 12px; text-decoration: none; position: absolute; top: 50%; transform: translateY(-50%); padding-left: 20px;">Reference</a></li><li class="lnbuttons" style="position: relative; height: 50px; border-bottom: 1px solid #e3e3e3; padding:0px;">

<a class="lnhover" href="/display/IASB3/Troubleshooting" style="width:175px; color: #333333; font-size: 12px; text-decoration: none; position: absolute; top: 50%; transform: translateY(-50%); padding-left: 20px;">Troubleshooting</a></li><li class="lnbuttons" style="position: relative; height: 50px; border-bottom: 1px solid #e3e3e3; padding:0px;">

<a class="lnhover" href="/display/IASB3/Training" style="width:175px; color: #333333; font-size: 12px; text-decoration: none; position: absolute; top: 50%; transform: translateY(-50%); padding-left: 20px;">Training</a></li><li class="lnbuttons" style="position: relative; height: 50px; border-bottom: 1px solid #e3e3e3; padding:0px;">

<a class="lnhover" href="#" onclick="switchln()" style="width:175px; color: #333333; font-size: 12px; text-decoration: none; position: absolute; top: 50%; transform: translateY(-50%); padding-left: 20px;">Page Tree</a>

</li></ul></div><div id="showhidebutton" style="border-right:.5px solid #e3e3e3; border-left:.5px solid #e3e3e3; border-bottom:.5px solid #e3e3e3; border-bottom-left-radius:10px; border-bottom-right-radius:10px; padding-left:5px; padding-right:5px; margin-bottom:5px; width:30px; position:relative; left:158px; text-align:center; display:table-cell;background:#f2f2f2;"><a href="#" style="text-decoration:none;" onclick="showhideleftnav()"><i class="fa fa-angle-left" aria-hidden="true" style="font-size:20px; font-weight:bold;"></i></a></div></div>

<div id="old_ln" style="width:295px; float:left; border-right:1px solid     #e3e3e3; border-bottom: 1px solid #e3e3e3; margin-right:5px; margin-top:0px; visibility:hidden; position: absolute; top:-20px;">

Return to Standard Nav Menuenter code here

please create a fiddle and share link – Sameer Nov 16 '16 at 12:19 — Sameer, Nov 16 '16 at 12:19

score 0 · Answer 1 · edited May 23 '17 at 12:24

0

Previously answered here

I think this is what you'll need. It isn't possible to make the class stay with CSS but you can use jquery to add a "hovered" class onmouseout

edited May 23 '17 at 12:24

Community

1
1

answered Nov 16 '16 at 12:23

David Picksley

256
2
8

score 0 · Answer 2 · answered Nov 16 '16 at 13:22

I assume your left nav is the left-sidebar2? if so then the code below should do the trick. Just add a CSS class to your left nav on hover or on click and style that nav via CSS:

CSS

#left-sidebar2 {
  /*your default style*/
}
#left-sidebar2.is-hovered {
  color: /*color when hovered*/
}
#left-sidebar2.is-selected {
  color: /*color when selected*/
}

JavaScript

//first add a reference to your CSS file
<link rel="stylesheet" type="text/css" href="pathToYourCSSFile/fileName.css">
//add the eventListener when DOM is ready
$(document).ready(function(){
  //add class "is-hovered" on mouseover and remove it on mouseout
  $(#left-sidebar2).hover (function(){
    $(this).toggleClass ("is-hovered");
  });
  //add or remove class "is-selected" on click
  $(#left-sidebar2).click (function(){
    $(this).toggleClass ("is-selected");
  });
});

Enabling hover and changing active tab color with jquery and css

2 Answers2