如何避免 JQueryUI 中的按钮单击和悬停突出显示答案

【问题标题】：How to avoid button click and hover highlight in JQueryUI如何避免 JQueryUI 中的按钮单击和悬停突出显示
【发布时间】：2012-12-31 21:44:38
【问题描述】：

我遇到了以下问题：我创建了一个选项对话框，其中每一行都有一些文本和一个按钮，该按钮通过对服务器的 get 请求在 ON 和 OFF 之间更改状态。

当我将鼠标悬停在按钮上时，它会以其“悬停”状态突出显示，当我单击它时，它会变为“单击”状态，然后我松开鼠标，它又恢复正常。这正是我所期望的，因为这是正常行为。

但是我想要做的，这让我发疯，因为我在任何地方都找不到它，是按钮不会响应我的鼠标悬停和点击，并且我可以激活或停用“单击”状态与服务器响应。我将如何做到这一点？

我有以下代码来初始化对话框和按钮：

<script>
    $(document).ready(function() {
        $("#dlg1").dialog();
        $(".settings_buttons").button();
    });
</script>

以及对话框和按钮的 HTML 设置：

    <div id="dlg1" title="Global device settings" class="dialog_window">

        <table>
            <form>
                <tr>
                    <td><h2>Setting</h2></td>
                    <td><button id="btn2" class="settings_buttons">OFF</button></td>
                </tr>
            </form>
        </table>

    </div>

【问题讨论】：

如果能提供一些HTML代码就好了。
查看哪些类被动态添加到 btn2，然后通过删除特定类来编写您的逻辑

标签： jquery jquery-ui click jquery-ui-dialog highlight

【解决方案1】：

您是否尝试禁用按钮？这是最快的，但可能不是刚刚提出的最佳解决方案：

<td><button id="btn2" class="settings_buttons" disabled="disabled">OFF</button></td>

您应该使用 disabled="disabled" 来获得跨浏览器的结果。

【讨论】：

我已经尝试过了，但我没有得到想要的结果，因为我使用了多个可选择的主题，无论如何我现在将启用/禁用状态放在单独的图像中。谢谢你的回答。

【解决方案2】：

您可以像这样为所有按钮定义样式：

.dupe{
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.16, rgb(207,207,207)),
    color-stop(0.79, rgb(252,252,252))
);
     background-image: -moz-linear-gradient(
    center bottom,
    rgb(207,207,207) 16%,
    rgb(252,252,252) 79%
);
padding:0px;
border:1px solid #6e6b6b;}

见demo

【讨论】：