Question

我有一个带有样式搜索框和按钮的搜索表单。我有按钮样式与CSS .active＆amp; .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/

如果您使用称为精灵的一体化图像，那就更好了： http://css-tricks.com/158-css-sprites/

Answer 2

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

CSS .active＆amp; .hover延迟？

2 个答案: