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

I've got the following problem: I've made an options dialog with, for each row, some text, and a button, which changes state between ON and OFF via a get request to the server.

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

Whenever i hover on the button, it gets highlighted with its "hover" state, and when i click it, it gets "clicked" state, and then i release the mouse and it gets normal again. That's exactly what I expect, because it's the normal behavior.

每当我将鼠标悬停在按钮上时，它会以“悬停”状态突出显示，当我点击它时，它会被“点击”状态，然后我释放鼠标并再次恢复正常。这正是我的期望，因为这是正常行为。

But what I want to do, and this is driving me crazy because I can't find it anywhere, is that the buttons won't respond to my mouse hovering, and clicking, and that I can activate or deactivate the "clicked" state with the server response. How would I accomplish this?

但是我想做什么，这让我发疯，因为我无法在任何地方找到它，是按钮不会响应我的鼠标悬停，点击，我可以激活或停用“点击”状态与服务器响应。我怎么做到这一点？

I have the following code to initialize the dialog and button:

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

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

And the HTML setup of the dialog and button:

以及对话框和按钮的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>

2 个解决方案

#1

Have You try to disable a button? It's the fastest but mayby not the best solution just put:

您是否尝试禁用按钮？这是最快但可能不是最好的解决方案：

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

You should use disabled="disabled" for crose browsers result.

对于crose浏览器结果，您应该使用disabled =“disabled”。

#2

You can define a style for all buttons like this:

您可以为所有按钮定义样式，如下所示：

.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;}

See demo

见演示

#1