change css class on mouse over
39,725
Solution 1
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?
Solution 2
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>
Author by
Matthew
I am a High School Student(Grade 12) and I'm hoping to become a computer software engineer after university. I am also a freelance web designer(in hopes that it will help pay for university).
Updated on December 20, 2020Comments
-
Matthew over 3 years
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>