0

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

  1. 显示当前设置，即静音或取消静音
  2. 悬停在上面时，显示替代

但是，我的问题是当用户单击按钮时，它不会显示对面的按钮，而是显示对面的按钮悬停状态。我希望这是有道理的，哈哈。基本上交互是：

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

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

4

3 回答 3

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/祝你好运！​</p>

于 2012-06-20T07:30:08.640 回答
0

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

于 2012-06-19T23:58:39.450 回答
0

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

http://jsfiddle.net/4mK9q/

于 2012-06-20T07:44:55.577 回答