Javascript 使用CSS和jQuery控制切换按钮

正如你在这里看到的，我正在尝试制作一个切换开关（一个静音按钮）

显示当前设置，即静音或取消静音

将鼠标悬停在上时，显示备选方案

但是，我的问题是，当用户单击按钮时，它显示的不是相反的按钮，而是相反的按钮悬停状态。我希望这是有意义的，哈哈。基本上相互作用是：

视图按钮处于取消静音状态

将鼠标悬停在上方并查看静音图标

再次单击并查看取消静音图标，因为它是静音状态悬停图像

当图标未悬停时，它会显示正确的图标，即静音

---

在JSFIDLE示例中，我希望单击以显示按钮，而不是：hover属性。。。有什么帮助吗？我知道这类事情不能由css单独处理。。（很抱歉，如果这看起来令人困惑，我今天已经在codespeak中工作了一段时间…

您可以在javascript中处理悬停状态并删除CSS状态。

考虑以下替代解决方案：

• 使用单个按钮
• 操纵

  .text（）

  和

  .css（）

  以更改按钮属性
• 由于需要特殊情况而实现的自定义切换程序

代码如下：

CSS:

HTML:

<button class=''> Mute </button>

--

要查看上面的代码，请参阅好运！

---

​

嗯，我认为这是目前最短的解决方案：

---

这是预期行为。由于新按钮出现时您将鼠标悬停在其上方，因此它将处于

悬停

状态。对不起，我的意思是我知道这完全是应该发生的。我想知道是否有人有一个无痛的解决方案，我想我现在能想到的任何东西都太长太复杂了。你的问题让我回到了逻辑转换的基本原理，这很好。下面是我对你的编码问题的回答。太好了！谢谢你对我挑剔的用户体验标准的呼吁：P

<button class=''> Mute </button>

function unmute() {
    $('button').removeClass('muted');
    $('button').text('Unmute');
    $('button').css('background-color','blue');
}
function mute() {
    $('button').addClass('muted');
    $('button').text('Mute');
    $('button').css('background-color','red');
}

function customToggler() {
    if (disableToggle) return;
    if ($('button').hasClass('muted')) unmute(); else mute();
}

var disableToggle = false;

$(document).ready(function() {

    customToggler();

    $('button').click(function() {
       disableToggle = true;
       customToggler();
    });

    $('button').mouseover(function() {  
        customToggler();
    }).mouseout(function() {  
        customToggler();
        disableToggle = false;
    });
});