asp.net 按钮行为的实现（例如，鼠标左键按住它会导致其文本稍微移动）

Question

我在 asp.net 中有一个按钮，如下所示：

<asp:Button ID="btnSaveInrpvEdit" CssClass="btnSaveInrpvEdit" runat="server" 
    Text="" ValidationGroup="B" onclick="btnSaveInrpvEdit_Click" />

它是 css：

.btnSaveInrpvEdit
{
    background: url(/Images/Admin/btnSave.png) no-repeat left top;
    width: 155px;
    height: 63px;
    border: 0px;
    outline: none;
}
.btnSaveInrpvEdit:hover,.btnSaveInrpvEdit:active
{
    background: url(/Images/Admin/btnSave_Hover.png) no-repeat left 1px;
    cursor: pointer;
    outline: none;
}

所以它悬停的一切都很好...
此时我想实现关于鼠标左键HOLDING和RELEASING的按钮行为！
如果您注意 ASP.NET 中的常规按钮，您会看到单击鼠标左键并按住该按钮时，因此看起来它的文本已移动了一点...
另外，当我们释放鼠标左键时，该按钮将返回正常模式！

我如何使用 css 和 javascript 完成这项工作？

提前致谢

Answer 1

首先，请注意按下按钮中的文本移动（以及如果文本移动）与 （或 input直接渲染的 元素。按钮样式和视觉行为一小部分取决于浏览器，而很大程度上取决于客户端使用的 Windows 版本和主题。对于实际上不移动文本的主题，手动移动背景图像可能看起来很奇怪。

也就是说，您可以使用 JavaScript（尤其是 jQuery）相对容易地模拟行为。

像这样的东西应该可以工作：

CSS（我在这里使用普通样式，因为按下通常会删除悬停样式）

.btnSaveInrpvEdit.mousedown
{
    background: url(/Images/Admin/btnSave.png) no-repeat 1px 1px;
}

JS + jQuery

$("#btnSaveInrpvEdit").mousedown(function () { $(this).addClass("mousedown"); });
$("#btnSaveInrpvEdit").mouseup(function () { $(this).removeClass("mousedown"); });

您可能还必须处理用户按下按钮，然后按住并将光标拖离按钮，这会导致按钮可以在视觉上取消按下，但如果将鼠标移回到按钮上，也会返回到按下状态。这有点棘手，但我确信您已经掌握了要点并且可以解决问题；）

作为至少防止按钮背景永远保持偏移的快速修复，您可以添加

$("#btnSaveInrpvEdit").mouseleave(function () { $(this).removeClass("mousedown"); });