我有一个带有样式搜索框和按钮的搜索表单。我有使用 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>
最佳答案
我相信您遇到了闪烁效果，因为默认情况下不会加载图像。
为了防止这种情况，您可能需要查看接下来的页面: http://www.maratz.com/blog/archives/2005/06/22/preload-hover-images-in-css/
如果您使用称为 Sprite 的一体化图像，那就更好了: http://css-tricks.com/158-css-sprites/
关于html - CSS .active 和 .hover 延迟？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7134337/