CODEWITHSUNDEEP
jquerycssmouseoveronmouseover
Matthew
Matthew

Reputation: 53

change css class on mouse over

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>

Upvotes: 4

Views: 41696

Answers (6)

imrvasishtha
imrvasishtha

Reputation: 99

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');
    });

Upvotes: 0

Lucas Fernandez Roldan
Lucas Fernandez Roldan

Reputation: 1

This Works for me

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

Upvotes: 0

Samich
Samich

Reputation: 30125

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?

Upvotes: 10

Michael Koper
Michael Koper

Reputation: 9781

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)

Upvotes: 0

James Khoury
James Khoury

Reputation: 22319

.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');
});

Upvotes: 0

Michael
Michael

Reputation: 1076

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>

Upvotes: 8

Related Questions