DanDaMan DanDaMan - 2 months ago 10
CSS Question

Using Jquery hover event to change css

So, I'm trying to use bootstraps "active" class, but when I hover over a different navbar link, I want the "active" to take the look of the other navbar link that are not being hovered over.

Here is my relevant HTML:

<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a id="active" href="#">TOWER DUEL</a></li>
<li><a class="otherNavs" href="#thecrew">THE CREW</a></li>
<li><a class="otherNavs" href="./presskit/">PRESSKIT</a></li>
</ul>
</div>


And here is my Relavent JQuery

$( ".otherNavs" ).hover(function() {
$("#active" ).css("color", "#68ddff !important");
$("#active" ).css("color", "#68ddff !important");
$("#active").css("background", "#0f2436")
$("#active").css("background", "-webkit-linear-gradient(#0f2436, #14335c)")
$("#active").css("background", "-o-linear-gradient(#0f2436, #14335c)")
$("#active").css("background", "-moz-linear-gradient(#0f2436, #14335c)")
$("#active").css("background", "linear-gradient(#0f2436, #14335c)")
});


As you may have noticed by now... There is a curveball. My background is gradient, so I had to use all that browser support bullshit, lol.

Im to the point where im like positive this code should work, but its not.

Also, I have confirmed my jquery library is functional, I'm using it in another parts of my code.

I do realize I have no support to "Pop it back in place" when I'm done hovering, but that's the easy part once I get the initial code working.

EDIT:

So I was approached with a much easier method, simply removing the class onhover and adding it back after:

<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li id="activePage" class="active"><a href="#">TOWER DUEL</a></li>
<li><a class="otherNavs" href="#thecrew">THE CREW</a></li>
<li><a class="otherNavs" href="./presskit/">PRESSKIT</a></li>
</ul>
</div>


And my new jquery:

$(".otherNavs").hover( function () {
$("#activePage").removeclass("active");
}, function () {
$("#activePage").addclass("active");
});


However, this code is still unfunctional. Any ideas?

Thanks

Answer

I think you should use addClass() when the mouse hovers over the element, and use removeClass() when the mouse stops hovering, instead of css(), like this:

$(".otherNavs").hover( function () {
    $(".active").addclass("myclass");
}, function () {
    $(".active").removeclass("myclass");
});

And then add this to your CSS:

.myclass {
    color: #68ddff !important;
    background: #0f2436;
    background: -webkit-linear-gradient(#0f2436, #14335c);
    background:    -moz-linear-gradient(#0f2436, #14335c);
    background:      -o-linear-gradient(#0f2436, #14335c);
    background:         linear-gradient(#0f2436, #14335c);
}

UPDATE:

For your new markup use this:

$(document).ready(function() {
  $(".otherNavs").hover(function() {
    $("#activePage").removeClass("active");
  }, function() {
    $("#activePage").addClass("active");
  });
});

your code should work if you put your <script> before the closing </body> tag.