CSS .active & .hover delay?

AMD64

New Member
I have a search form with a styled search box and button. I have the button styled with CSS .active & .hover classes. Everything is fine and it looks great however, I'm experiencing a short delay between normal, hover & and active states of the search button (the button will blink between states then states will load seamlessly afterwards. I was wondering if there is a way to load the CSS on page load with a bit of javascript or if there is another method of getting the button to work seamlessly between states. Any suggestions? CSS:\[code\]fieldset.search { border: none; width: 480px; background-image: url(images/searchbackground.png); background-repeat: no-repeat; padding-top: 36px; padding-right: 20px;}.search input, .search button { border: none; float: left;}.search input.box { color: #690; font-size: 1.2em; width: 427px; height: 25px; margin-right: 7px; padding-left: 5px; padding-bottom: 3px; padding-right: 4px; margin-left: 7px;}.search button.btn { width: 30px; height: 30px; cursor: pointer; text-indent: -9999px; background: url(images/search.png) no-repeat top right;}.search button.btn:hover { background: url(images/search_hover.png) no-repeat top right;}.search button.btn:active { background: url(images/search_active.png) no-repeat top right;}\[/code\]HTML:\[code\]<form name="form" action="search.php" method="get"> <fieldset class="search"> <input type="text" class="box" name="q" /> <button class="btn" name="Submit">Search</button> </fieldset></form>\[/code\]
 
Top