CSS .active＆.hover延迟？

我有一个带风格的搜索框和按钮的搜索表单。我有按钮样式与CSS .active & .hover类。一切都很好，它看上去很不错但是，我遇到正常之间的短暂延迟，悬停&和搜索按钮的激活状态（该按钮将状态之间闪烁状态，然后将加载之后无缝。CSS .active＆.hover延迟？

我在想，如果有一种方式来加载页面加载CSS的使用有点JavaScript或是否有获得按钮状态之间的无缝协同工作的另一种方法有什么建议

CSS：？

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

HTML：

<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>

来源

2011-08-20 rumspringa00

雪碧是由这是做这件事的最好方法。 – thirtydot