javascript - 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

首先，请注意在按下的按钮中移动的文本(以及如果文本移动)与<asp:Button无关。 (或它呈现的 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"); });