Keeping CSS animated buttons on Active state? How is this done?

1

Hi all,

I have a few CSS buttons with animated backgrounds on hover in my main nav. I’m trying to get the animated state (active) to remain active when on that specific page. I’ve found a few different approaches to this using using jQuery but still haven’t gotten it to work. Here’s one on Kirupa that doesn’t work for me because I don’t have a ‘home’ button:

Here’s the CSS for one of the 3 buttons in my nav (About, Work, Contact)


nav ul .nav-about { left:0px;
	background: url(assets/navFlagAbout.png) no-repeat;
	background-position: 0px -187px; 
	height:100%;
	width:110px;
	margin:0px;
	padding:0px;
	overflow:hidden;
	position: absolute;
	cursor: pointer;
	-webkit-transition: background-position .2s ease-in-out;
	-moz-transition:background-position .2s ease-in;  
	-o-transition:background-position .2s ease-in;
	-ms-transition:background-position .2s ease-in;    
	transition:background-position .2s ease-in; 
}
nav ul .nav-about:hover { left:0px; 
	background: url(assets/navFlagAbout.png) no-repeat;
	background-position: 0px 0px;
	cursor: pointer;
	-webkit-transition: background-position .2s ease-in-out;
	-moz-transition:background-position .2s ease-in;  
	-o-transition:background-position .2s ease-in; 
	-ms-transition:background-position .2s ease-in;   
	transition:background-position .2s ease-in; 
}


nav ul .nav-about a span {
	background: url(assets/navIconsAbout.png) no-repeat;
	background-position: 21px 64px;
	position:absolute;
	height:100%;
	width:110px;
	top:0px;
	right:0px;
	display: block;
	overflow:hidden;
	margin:0px;
	padding:145px 0px 0px 2px;
	-webkit-transition: background-position .2s ease-in-out;
	-moz-transition:background-position .2s ease-in;  
	-o-transition:background-position .2s ease-in;
	-ms-transition:background-position .2s ease-in;    
	transition:background-position .2s ease-in; 
}


nav ul .nav-about a span:hover {
	background: url(assets/navIconsAbout.png) no-repeat;
	background-position: -90px 64px;
	cursor: pointer;
	-webkit-transition: background-position .2s ease-in-out;
	-moz-transition:background-position .2s ease-in;  
	-o-transition:background-position .2s ease-in; 
	-ms-transition:background-position .2s ease-in;   
	transition:background-position .2s ease-in; 
}

I realize that seems verbose but I’m animating two elements when the button is hovered (a flag slides down and an icon slides to the left). I’d like both animated states to stay on their ‘hover’ or ‘active’ state when the user is on that page. Is there a solution with CSS or do I need to learn jQuery?

Any help would be greatly appreciated!

Thanks!