Управление переключая кнопки с помощью CSS и JQuery

Question

Как вы можете видеть в этом jsfiddle, я пытаюсь сделать тумблер (кнопка отключения звука), что

1. отображает текущую настройку, т.е. отключения или включения
2. при наведении на, показывает альтернативный

Однако, моя проблема в том, когда пользователь нажимает на кнопку, вместо отображения кнопки напротив, он показывает, что противоположные кнопки парить состояние. Надеюсь, это имеет смысл, ха-ха. В основном взаимодействие: кнопка

1. вид в UNMUTE состоянии
2. парения и увидеть значок отключения звука
3. нажмите и увидеть значок UNMUTE снова, потому что это немые состояния парить изображение
4. , когда значок не наводится на него, он отображает соответствующий значок, т. е. отключен

В примере jsfiddle я хочу щелкнуть мышью, чтобы отобразить кнопку, а не атрибут hover ... любую помощь? Я знаю, что эта любопытная вещь не может быть обработана только css. (Извините, если это кажется запутанным, я уже некоторое время работал в кодексе)

Answer 1

Рассмотрим альтернативное решение:

• использует одну кнопку
• манипулирует .text() и .css() изменить атрибуту кнопку
• пользовательских Toggler реализован из-за особых случаях требуется

Вот код:

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/