Controlling toggling buttons with CSS and jQuery

Question

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

displays the current setting, i.e. mute or unmute
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:

view button in unmute state
hover over and see the mute icon
click and see the unmute icon again, because it is the mute states hover image
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...)

This is intended behaviour. Since you are hovering over the new button when it appears, it will be in the hover state. — Scott Stevens
– Scott Stevens, Commented Jun 19, 2012 at 23:54
sorry, I meant to say that I know that this is completely what is supposed to happen. I'm wondering if someone has a painless solution, I think anything I would come up with at the moment would be too long and complex.. — romeboards
– romeboards, Commented Jun 19, 2012 at 23:57
Your question made me go back to logic switching fundamentals, which is good. See my answer to your coding problem below. — Dexter Huinda
– Dexter Huinda, Commented Jun 20, 2012 at 7:40

Dexter Huinda · Accepted Answer · 2012-06-20 07:30:08Z

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!

answered Jun 20, 2012 at 7:30

Dexter Huinda

1,2221 gold badge7 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

romeboards Over a year ago

beautiful! thank you for appealing to my nitpicky UX standards :P

jcubic · Accepted Answer · 2012-06-19 23:58:39Z

0

You can handle hover states in javascript and remove CSS ones.

answered Jun 19, 2012 at 23:58

jcubic

67.1k58 gold badges252 silver badges466 bronze badges

Comments

skywlkr · Accepted Answer · 2012-06-20 07:44:55Z

0

Well, I think this is the shortest solution right now:

http://jsfiddle.net/4mK9q/

answered Jun 20, 2012 at 7:44

skywlkr

1,4551 gold badge13 silver badges22 bronze badges

Collectives™ on Stack Overflow

Controlling toggling buttons with CSS and jQuery

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related