Question

As you can see in this jsfiddle, I’m trying to make a toggle switch (a mute button) that

1. displays the current setting, i.e. mute or unmute
2. when hovered upon, displays the alternative

However, my problem is when the user clicks the button, instead of displaying the opposite button, it shows that opposite buttons hover state. I hope this is making sense, haha. Basically the interaction is:

1. view button in unmute state
2. hover over and see the mute icon
3. click and see the unmute icon again, because it is the mute states hover image
4. when the icon is not hovered upon, it displays the proper icon, i.e. mute

In the jsfiddle example, I want a click to display the button, not the :hover attribute… any help? I’m aware that this kinda thing can’t be handled by css alone.. (sorry if this seems confusing, ive been working in codespeak for a while today…)

Answer 1

Consider this alternative solution:

• uses single button
• manipulates .text() and .css() to change button attribute
• custom toggler implemented because of special cases you require

Here is the code:

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

—

To see the above code in action, see http://jsfiddle.net/fwjz5/ Good luck!
​