如果我单击它然后取消单击，则 3 状态图像按钮保持按下状态答案

【问题标题】：3 state image button stays pressed if i click it and then cancel the click如果我单击它然后取消单击，则 3 状态图像按钮保持按下状态
【发布时间】：2011-08-19 21:07:24
【问题描述】：

当我单击按钮时，:active 类变为活动状态并变为第三个图像，“单击状态”，但是当我取消单击时，该状态保持在按钮上，直到我单击主体上的其他位置。我想在取消点击后按钮返回到第一个状态。

.button_friend {
   width: 240px;
   height: 35px;
}
.button_friend a {
   width: 240px;
   height: 35px;
   background-position: left 0px;
   background-image: url("../Images/btn_friend.png");
   display: block; text-indent: -9999px;
   margin: auto auto auto auto;
   cursor: pointer;
   outline: transparent solid 0px;
}
.button_friend a:hover {
   background-position: left -36px;
}
.button_friend a:active { 
   background-position: left -73px;
}

图片：

http://screencast.com/t/QaayuIJx

【问题讨论】：

能否请您创建 jsfiddle 来复制您的问题？
你用的是什么浏览器？我的 jsfiddle 似乎没有这个问题。
所以听起来您需要从mouseup 上的anchor 标记中删除:active 伪类。不知道该怎么做；只是帮助澄清问题。
嗯，我注意到 firefox 和 IE 中的问题，但我无法用纯 css 修复它，像 .mouseover 和 .mouseout 这样的 jquery 事件也无法修复它，它没有拖动时似乎不会失去焦点，因此 .blur 无法修复它。还没找到解决办法。
@vanErp，是的，mouseout/mouseover/focus/blur/etc 的问题与我相同

标签： jquery css image button rollover

【解决方案1】：

那个jsFiddle里面没有代码？但是，根据您的照片和问题的标签，您似乎正在使用 jquery ui 和带有股票主题之一的 ui 框架，然后添加您自己的 css？如果我错了，请将其归结为 jsfiddle 上缺少的代码。

否则，

我已经看到很多 jquery ui“按钮”是由实际按钮（输入或提交）构建的，不知道为什么，但我有一些想法为什么会这样。看看这个页面。 http://taitems.github.com/Aristo-jQuery-UI-Theme/# 。单击输入和提交类型按钮。状态已保存。单击转换为按钮的 div - 它不是。您会注意到带有图标的下部按钮也可以执行您想要的操作，但它们也来自 div。我认为 jquery ui 有一个错误，或者这是期望的行为？

要修复它，您可以只使用另一个元素，或者如果需要按钮，请在单击时删除 ui-state-active 类。

【讨论】：