change css class on mouse over

Question

Hi im trying to make my navigation bar do the css focus effect on mouseover so it will not change until another menu item has the mouseover. Im trying to do it using Jquery.

Here is my code(I did import the jquery script btw and my css class):

    <div id="topNav">
<a href="contact.html"class="topNavNormal"><div id="topNav4" class="topNavNormal">Contact Us</div></a>
<a href="about.html" class="topNavNormal"><div id="topNav3" class="topNavNormal">About Us</div></a>
<a href="services.html" class="topNavNormal"><div id="topNav2" class="topNavNormal">Services</div></a>
<a href="index.html" class="topNavActive"><div id="topNav1" class="topNavActive" style="border-left: 3px solid #c0c0c0;">Home</div></a>
<script type="text/javascript">
$(document).ready(function(){
$('#topNav1').mouseover(function(){
    $('#topNav1').removeClass().addClass('topNavActive'),
    $('#topNav2').removeClass().addClass('topNavNormal'),
    $('#topNav3').removeClass().addClass('topNavNormal'),
    $('#topNav4').removeClass().addClass('topNavNormal'),
    });
}),
$('#topNav2').mouseover(function(){
    $('#topNav2').removeClass().addClass('topNavActive'),
    $('#topNav1').removeClass().addClass('topNavNormal'),
    $('#topNav3').removeClass().addClass('topNavNormal'),
    $('#topNav4').removeClass().addClass('topNavNormal'),
    });
}),
$('#topNav3').mouseover(function(){
    $('#topNav3').removeClass().addClass('topNavActive'),
    $('#topNav1').removeClass().addClass('topNavNormal'),
    $('#topNav2').removeClass().addClass('topNavNormal'),
    $('#topNav4').removeClass().addClass('topNavNormal'),
    });
}),
$('#topNav4').mouseover(function(){
    $('#topNav4').removeClass().addClass('topNavActive'),
    $('#topNav1').removeClass().addClass('topNavNormal'),
    $('#topNav3').removeClass().addClass('topNavNormal'),
    $('#topNav2').removeClass().addClass('topNavNormal'),
});
});
</script>
</div>

Also Here is my Css Classes:

<style type="text/css">
#topNav1
{
text-align: center;
font-size: 18px;
float: right;
width: 50px;
height: 64px;
}
#topNav2
{
text-align: center;
font-size: 18px;
float: right;
width: 70px;
height: 64px;
}
#topNav3
{
text-align: center;
font-size: 18px;
float: right;
width: 90px;
height: 64px;
}
#topNav4
{
text-align: center;
font-size: 18px;
float: right;
width: 90px;
height: 64px;
}
#topNav1, #topNav2,  #topNav3{
border-right: 1px solid #c0c0c0;
}
#topNav4{
border-right: 3px solid #c0c0c0;
}
a .topNavNormal{
line-height: 54px;
color: #42647F;
}
.topNavNormal{
background-color: #B0E0E6;
}
a .topNavActive{
line-height: 54px;
color: #00EEEE;
background-color: #5F9EA0;
}
</style>

if you aren't going to worry about ie6 use css selector `:hover` http://www.htmldog.com/guides/cssintermediate/pseudoclasses/ — James Khoury, Aug 31 '11 at 06:35
I tried checking css selector but there is none that I saw that would work for a focus on mouseover(there is a hover but it cancels as soon as your mouse goes off it but I only want it to cancel when another menu item is highlighted). Also I cant have users click to focus because clicking will go to new page. — Matthew, Aug 31 '11 at 06:39
Ah I didn't quite under stand but now i believe you mean last hovered item will be this "active" class — James Khoury, Aug 31 '11 at 06:46

Samich · Accepted Answer · 2011-08-31T07:06:30.257

10

If you don't care about IE6 - just use :hover like James suggeted. Otherwise simplify your code:

    $(document).ready(function () {
        $('#topNav a').hover(function () {
            $(this).addClass('topNavActive');
        }, function () {
            $(this).removeClass('topNavActive');
        });
    });

if you want to immitate :focus (but with mouseover):

    $(document).ready(function () {
        $('#topNav a').hover(function () {
            $(this).siblings().removeClass('topNavActive');
            $(this).addClass('topNavActive');
        }
    });

is it what you need?

edited Aug 31 '11 at 07:06

answered Aug 31 '11 at 06:41

Samich

29,157
6
68
77

The problem is that is still a hover. im trying to make it so its like the css selector :focus without having to click to activate it(as if its on mouseover). or in other words i dont want it to no longer be highlighted unless somthing else is. – Matthew Aug 31 '11 at 06:47
The second function callback will remove highlighting on moving mouse to other element. Only one element will be highlighted at the moment. – Samich Aug 31 '11 at 06:50
ok I will try it tommorow as soon as I get up(I am supposed to be asleep like 2 hours ago). If it works I will mark yours as the accepted answer(but only if it works). btw thanks for clarifying that for me. =) – Matthew Aug 31 '11 at 07:06
I had to tweek the seconed part of code a bit but it work now. Thanks for the help. I't would have taken a couple more weeks for me to do it without the help. – Matthew Sep 03 '11 at 04:30

score 8 · Answer 2 · answered Aug 31 '11 at 06:45

8

The best practice is to solve it with pure CSS (without any jQuery at all). here's a quick example:

<style type="text/css">    
    .navItem { 
        background: yellow;
     }
    .navItem:hover { 
        background: blue;
    }
</style>

answered Aug 31 '11 at 06:45

Michael

1,058
10
17

Will not work for what I need it to do because I want it to be like the :focus css selector exept for it being activated like the hover(but only for topNav items). It must activate the focus on hover for clicking it will open the link. – Matthew Aug 31 '11 at 07:00

score 0 · Answer 3 · answered Jan 08 '16 at 16:00

0

This Works for me

$(".panel").hover(function () {
    $(this).addClass('panel-info');
    $(this).removeClass('panel-warning');
}, function () {
    $(this).removeClass('panel-info');
    $(this).addClass('panel-warning');
});

answered Jan 08 '16 at 16:00

Lucas Fernandez Roldan

1

score 0 · Answer 4 · answered Dec 19 '18 at 18:04

This works for me. If you want to do something excited with bootstrap. Try this:

 $(".small").hover(function () {
        $(this).addClass('lead');
        $(this).removeClass('small');
    }, function () {
        $(this).removeClass('lead');
        $(this).addClass('small');
    });

Michael Koper · Answer 5 · 2011-08-31T06:54:39.570

0

try something like this.

    $('.topnav_class').over(function(){
        // delete all the classes of hover
        $(.topnav_class).removeClass('hover');
        // add the hover class just to this node
        $(this).addClass('hover);
    }, function(){
        $(this).addClass('hover');
    });

You have to play with $(this) more so you can do your jQuery a little more DRY (Do not repeat yourself)

edited Aug 31 '11 at 06:54

answered Aug 31 '11 at 06:40

Michael Koper

9,586
7
45
59

score 0 · Answer 6 · answered Aug 31 '11 at 06:49

.topNavNormal{
    background-color: #B0E0E6;
}

a .topNavNormal{
    line-height: 54px;
    color: #42647F;
}

if you aren't using these in different places i'd merge them and then you can just

a .topNavActive{    
    line-height: 54px;
    color: #00EEEE;
    background-color: #5F9EA0;    
}

and a simple javascript like:

$('topNavNormal').mouseover(function(){
    $('topNavNormal').removeClass('topNavActive');
    $(this).addClass('topNavNormal');
});

change css class on mouse over

6 Answers6