CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3482096
user3482096

Reputation: 25

Using Jquery to remove/add border on hover

I know there's several other threads with similar questions answered although I believe my question is slightly different.

Within my navigation the page you are currently on has a bottom border on the nav link. I'm trying to use Jquery to make it so that when you hover over any of the other links all borders are removed except for a new border on the hovered link. So within the example in JSFiddle when I hover over "About" the underline on "Home" would be replaced with an underline on "About" and then returned to "Home" when the mouseleaves.

http://jsfiddle.net/6Ucmq/

Anybody have any suggestions? All help greatly appreciated! 

            $(document).ready(function() {
        $(".navigation a").hover(
                        function() {           $(this).removeClass("hoverEffectSelect"); }

            function() { $(this).addClass(".hoverEffect"); },
            function() { $(this).removeClass(".hoverEffect"); }
            );
        });

Upvotes: 1

Views: 1279

Answers (5)

Sridhar R
Sridhar R

Reputation: 20428

Try this

$(document).ready(function () {
                var olda = $('.navigation a.hoverEffectSelect').index();
                $(".navigation a").hover(function (olda) {
                    $('.navigation a').removeClass("hoverEffectSelect");
                    $(this).addClass("hoverEffect");
                }, function () {
                    $('.navigation a:eq(' + olda + ')').addClass("hoverEffectSelect");
                });

            });

DEMO

Upvotes: 0

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324820

No jQuery necessary: JSFiddle

The idea is to apply the border-bottom to the active element and to the hovered one, but when the entire navigation is hovered over it should hide the border from the active element.

HTML:

<div class="headingTop">
    <div class="navigation">
        <a  class="hoverEffect active" href=".html">HOME</a>
        <a  class="hoverEffect" href=".html">ABOUT</a>
        <a  class="hoverEffect" href=".html">PROJECTS</a>
        <a  class="hoverEffect" href="r.html">CONTACT</a>
    </div><!-- DIV navigation -->
</div><!-- DIV headingTop -->

CSS:

.navigation a {
    color: black;
    text-decoration: none;
    font-size: 20px;
    font-family: 'Roboto Condensed', 'Alef', sans-serif;
    margin-left: 20px;
    border-bottom: 0px solid transparent;
}

.hoverEffect {
    transition: border-bottom 300ms linear;
}
.navigation:hover>.active {
    border-bottom: 0px solid transparent;
}
.hoverEffect.active, .navigation>.hoverEffect:hover {
    border-bottom: 2px solid #EBCD37;
}

Upvotes: 2

Felix
Felix

Reputation: 38112

You can do like this:

$(document).ready(function () {
    var index = $('a.hoverEffectSelect').index();
    $(".navigation a").hover(function () {
        $(".navigation a").removeClass("hoverEffectSelect");
        $(this).addClass("hoverEffect");
    }, function () {
        $(this).removeClass("hoverEffect");
        $('.navigation a').eq(index).addClass('hoverEffectSelect');
    });
});

Fiddle Demo

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388446

Try

$(document).ready(function () {
    var $home = $(".navigation a.hoverEffectSelect");
    $(".navigation a").hover(function () {
        $home.removeClass("hoverEffectSelect");
        $(this).addClass("hoverEffectSelect");
    },function () {
        $(this).removeClass("hoverEffectSelect");
        $home.addClass("hoverEffectSelect");
    });
});

Demo: Fiddle

Upvotes: 4

Aminesrine
Aminesrine

Reputation: 2140

Try:

$(".navigation a").hover(function() {
$(".navigation a").css('border-width', '0');
$(this).css('border', '3px solid black'); 
});

In this case you will remove the borders first, then set it as you want.

Upvotes: 1

Related Questions