Question

正如您在jsfiddle中看到的那样，我正在尝试制作切换开关（静音按钮）

显示当前设置，即静音或取消静音
当盘旋时，显示替代

然而，我的问题是当用户点击按钮而不是显示相反的按钮时，它显示相反的按钮悬停状态。我希望这是有道理的，哈哈。基本上互动是：

处于取消静音状态的查看按钮
将鼠标悬停在上方，然后看到静音图标
再次点击并查看取消静音图标，因为它是静音状态悬停图像
当图标没有悬停时，它会显示正确的图标，即静音

在jsfiddle示例中，我希望单击以显示按钮，而不是：hover属性...任何帮助？我知道这种事情不能由css单独处理..（对不起，如果这看起来很混乱，我今天在codepeak工作了一段时间......）

Answer 1

考虑这个替代解决方案：

使用单个按钮
操纵.text()和.css()更改按钮属性
由于您需要的特殊情况而实施的自定义切换器

以下是代码：

CSS：

button { width: 200px; height: 60px; color: white; font-size: 20px; background-color: red; }

HTML：

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

JS：

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

-

要查看上面的代码，请参阅http://jsfiddle.net/fwjz5/祝您好运！

Answer 2

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

Answer 3

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

http://jsfiddle.net/4mK9q/

使用CSS和jQuery控制切换按钮

3 个答案: