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"); });

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

1 个答案: