реализация поведения кнопок 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"); });