CSS .active & .hover延迟？

Question

我有一个带有样式的搜索框和按钮的搜索表单。我有样式与CSS .active和.hover类的按钮。一切都很好，看起来很棒，但是，我在搜索按钮的正常、悬停和活动状态之间遇到了短暂的延迟(按钮将在状态之间闪烁，然后状态将无缝加载)。

我想知道是否有一种方法可以在页面加载时使用一点javascript加载CSS，或者是否有其他方法可以让按钮在不同状态之间无缝工作。有什么建议吗？

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>

Answer 1

我相信你正在经历一个闪烁的效果，因为图片不是默认加载的。

为了防止出现这种情况，您可能需要查看下一页：http://www.maratz.com/blog/archives/2005/06/22/preload-hover-images-in-css/

更好的方法是使用一个名为sprite的多合一图像：http://css-tricks.com/158-css-sprites/

Answer 2

您可以使用javascript/jquery预加载图像，如下所示：http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript