JQuery 图标自定义和悬停状态问题

Question

** 已解决 **

Chrome 显然可以对缓存中的文件进行死亡控制。杀掉进程，手动清缓存，刷新十几次都没用。

更改文件名以强制其下载新内容确实。

去图吧。

---

** 更新**

好的，这是 Chrome 唯一出现的问题。为了响应清除浏览器缓存的建议，我实际上启动了 IE 9，因为它从未加载过页面。这确实显示了处于悬停状态的图标。

现在我真的很困惑，因为跨平台问题有点超出我的薪水范围。这就是为什么我首先让 JQuery 为我完成所有繁重的工作! :P

---

使用最新的 1.8.20 JQuery。

需要一个图标，所以编辑了所有 7 个主图标 png 文件，并在未使用的空间中添加了一个图标。

在 css 文件中创建了一个具有相关偏移量的新图标。一切似乎都工作正常，除了悬停状态，它是空白的。

似乎无法通过检查确定在悬停状态下使用的是什么文件，但 CSS 文件指示一个 png 文件，其中显示了我的自定义图标。无论如何，所有内容都已编辑。

关闭浏览器并刷新几次(尽管缓存会阻止我完全看到它)。

为什么悬停状态下图标是空白的？

** 回应反馈**

没有代码，因为正如我已经说过的，它可以在所有其他按钮状态下工作。无论如何，大部分都是在 Photoshop 中完成的。这似乎是不必要的，所以我为遗漏道歉。

.ui-icon-dollar { background-position: -160px -144px; }

这是 CSS 文件中唯一的额外代码行。其他所有内容均未修改。

/* states and images */
.ui-icon { width: 16px; height: 16px; background-image: url(/images/ui-icons_0078ae_256x240.png); }
.ui-widget-content .ui-icon {background-image: url(/images/ui-icons_0078ae_256x240.png); }
.ui-widget-header .ui-icon {background-image: url(/images/ui-icons_d8e7f3_256x240.png); }
.ui-state-default .ui-icon { background-image: url(/images/ui-icons_e0fdff_256x240.png); }
.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(/images/ui-icons_056b93_256x240.png); }
.ui-state-active .ui-icon {background-image: url(/images/ui-icons_f5e175_256x240.png); }
.ui-state-highlight .ui-icon {background-image: url(/images/ui-icons_f7a50d_256x240.png); }
.ui-state-error .ui-icon, .ui-state-error-text .ui-icon {background-image: url(/images/ui-icons_fcd113_256x240.png); }

这些是来自 JQuery Themeroller 的原始 CSS 行。所有主图标文件都是相同的(颜色除外)，并且没有为一个图标定义多个偏移量。我添加的那一行代码就是正常定义图标的全部。

由于它在其他状态下显示正确，我只能假设偏移量是正确的。

现在Chrome中的检查工具，只是在悬停状态下的span元素上没有显示出任何差异。该背景图像保持不变。

我不知道您可以使用 Chrome 实时编辑它! :) 谢谢。

实时更改背景图像对处于悬停状态的按钮本身没有影响。它仍然是空白....

当然，我正在经历所有这些，因为制作您自己的图标非常好，但您不能使用 .button 来定义任何按钮和回调，而不受那些主图标文件中的内容的限制。一次性激活按钮的所有不同状态、定义标签和回调非常有用。写更少的代码等等:)

必须有一种方法可以将按钮图标添加到 JQuery 主题并且仍然让它们在框架内工作..

Answer 1

这听起来很明显，但当类似的事情发生在我身上时，我首先想到的是浏览器缓存。为了解决这个问题，我尝试使用 ctrl-refresh 或其他浏览器。我很惊讶它经常有帮助。我希望你的问题很简单。 =]