CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3482096
user3482096

Reputation: 25

Creating border on hover with jQuery?

I've been trying to get this code working all morning to absolutely no avail. I know I'm just doing something simple wrong but I just can't figure it out?

Would any of you guys be able to give me a hand?

I'm trying to make a white bottom border show up when you over over the link in the navigation. The page that you are currently on will be displayed green so the border for that link needs to be green on hover instead of white.

http://jsfiddle.net/sCt7r/

        $(document).ready(function() {
        $("hoverEffect").hover(
            function() { $(this).addClass("Hover1"); },
            function() { $(this).removeClass("Hover1"); }
            );
        });

        $(document).ready(function() {
        $(".navSelect").hover(
            function() { $(this).addClass("Hover2"); },
            function() { $(this).removeClass("Hover2");}
            );
        });

Upvotes: 1

Views: 140

Answers (5)

user2428118
user2428118

Reputation: 8114

You don't need jQuery. Just use [CSS :hover].(https://developer.mozilla.org/docs/Web/CSS/:hover) 

.navigation a.hoverEffect:hover{
    border-bottom: 1px solid black;
}

.navSelect:hover {
    border-bottom: 1px solid green;
}

↪ You can see this code in action at JSFiddle

Upvotes: 1

Neel
Neel

Reputation: 11741

Several mistakes in your code go through the code

$(document).ready(function() {
                $(".hoverEffect").on("mouseover", function(){
                $(this).addClass("hover1"); 

            });
$(".navSelect").on("mouseover", function(){
               $(this).addClass("hover2"); 
                $(this).removeClass("Hover2");
});
            });

http://jsfiddle.net/sCt7r/17/

Upvotes: 0

katsarov
katsarov

Reputation: 1822

$(".hoverEffect").on('mouseover', function(){
    $(this).addClass("hover1");
});
$(".hoverEffect").on('mouseout', function(){
    $(this).removeClass("hover1");
});

in your code some mistakes: its not Hover2, its hover2 $("hoverEffect").hover(.... must be $(".hoverEffect").hover(

Upvotes: 0

Felix
Felix

Reputation: 38112

Some changes:

1) You're missing jQuery in your fiddle

2) You just need one DOM ready handler $(document).ready(function() {...});

3) Use . to target class , so use $(".hoverEffect") instead of $("hoverEffect")

4) You need to add class hover1 and hover2 not Hover1 and Hover2

Updated Fiddle

But actually you can use pure CSS to achieve this task using :hover selector:

.hoverEffect:hover {
    border-bottom: 1px solid black;
}
.navSelect:hover {
    border-bottom: 1px solid green;
}

Updated Fiddle

Upvotes: 1

Zagham Naseem
Zagham Naseem

Reputation: 41

I've made some changes in the code, try this

http://jsfiddle.net/3LXH4/

but there is a also a simple way to do it using css, you can also try it..

Heres the code

            $(document).ready(function() {
            $(".hoverEffect").hover(
                function() { $(this).addClass("hover1"); },
                function() { $(this).removeClass("hover1"); }
            );

            $(".navSelect").hover(
                function() { $(this).addClass("hover2"); },
                function() { $(this).removeClass("hover2");}
            );
        });

Upvotes: 0

Related Questions