使用 CSS 和 jQuery 控制切换按钮

Controlling toggling buttons with CSS and jQuery

本文关键字：按钮 控制 jQuery CSS 使用      更新时间：2023-09-26

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

  1. 显示当前设置，即静音或取消静音
  2. 将鼠标悬停在上时，显示备选方案

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

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

在 jsfiddle 示例中，我希望单击以显示按钮，而不是 ：hover 属性...有什么帮助吗？我知道这种事情不能单独由css处理。（对不起，如果这看起来令人困惑，我今天已经在代码中工作了一段时间......

考虑以下替代解决方案：

  • 使用单个按钮
  • 操作.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/祝你好运！​

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

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

http://jsfiddle.net/4mK9q/

相关文章：