使用 Jquery 悬停事件更改 css

Question

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 1

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.

Answer 2

Pure CSS:

 #navbar:hover .active:not(:hover) { color: #68ddff !important; background: "#0f2436"; background: -webkit-linear-gradient(#0f2436, #14335c); background: -o-linear-gradient(#0f2436, #14335c); background: -moz-linear-gradient(#0f2436, #14335c); background: linear-gradient(#0f2436, #14335c);

 <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>