基于Fomantic实现带Hover预览效果的切换按钮

免责声明 #

我之前提过类似问题（因表述不清已删除，现重新尝试）。

技术框架 #

我正在开发一款R/Shiny应用，用R库构建Web界面，其中用到了shiny.semantic库，通过它调用预编译的Fomantic CSS/JS包（版本2.8.3）。
理论上我可以链接最新版或定制版Fomantic框架，但部署系统网络受限，所以我希望尽可能依赖R打包库（方便在该系统安装），同时减小包体积，因此不打算自行打包Fomantic。
这意味着我必须接受R包作者为预编译CSS/JS选择的默认配置（我判断是出厂默认）。
需要说明的是，当前问题和R无关（除了无法轻易替换现有Fomantic依赖），我可以自由编写任意HTML，所以本质是个HTML/CSS/JS问题。

需求目标 #

我需要实现一个按钮，满足以下要求：

• 初始加载时呈现禁用外观（opacity: .45）；
• 鼠标悬停时添加.teal类改变颜色，同时透明度恢复为1；
• 点击后保留.teal类和透明度1的状态；
• 点击后鼠标悬停时，移除.teal类恢复原色，透明度变为.45。
  简单说就是按钮通过点击切换两种状态，悬停效果可预览点击后的状态变化。

我的尝试 #

JavaScript代码 #

$(document).ready(function () {
  $(".button").on({
    click: function () {
      $(this).toggleClass("is-active");
      $(this).addClass("clicked");
      $(this).off("mouseleave");
      $(this).one("mouseleave", function () {
        $(this).removeClass("clicked");
      });
    },
    mouseenter: function () {
      $(this).toggleClass("teal", !$(this).hasClass("is-active"));
      $(this).one("mouseleave", function () {
        $(this).toggleClass("teal", $(this).hasClass("is-active"));
      });
    }
  });
});

CSS代码 #

.button.is-active:not(:hover), .button:not(.is-active):hover:not(.clicked) {
  opacity: 1 !important;
}

.button.is-active:hover:not(.clicked), .button:not(.is-active) {
  opacity: 0.45 !important;
}

HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fomantic-ui@2.8.3/dist/semantic.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/fomantic-ui@2.8.3/dist/semantic.min.css" rel="stylesheet"/>

<button class="ui icon button">
<i class="less than equal icon"></i>
</button>

疑问 #

当前实现方案太复杂了。在给定限制（使用预编译Fomantic框架，且不想在CSS中硬编码颜色）的前提下，有没有更规范的实现方案？专业前端开发者会怎么解决这个问题？

可以简化状态管理，核心用is-active类区分两种状态，结合CSS伪类控制样式，减少JS复杂度：

优化后的CSS #

/* 初始状态：禁用外观 */
.ui.button {
  opacity: 0.45;
}

/* 非激活状态hover：透明度恢复1 */
.ui.button:not(.is-active):hover {
  opacity: 1;
}

/* 激活状态：保持透明度1 */
.ui.button.is-active {
  opacity: 1;
}

/* 激活状态hover：切换为禁用透明度 */
.ui.button.is-active:hover {
  opacity: 0.45;
}

优化后的JavaScript #

$(document).ready(function() {
  const $btn = $('.ui.button');
  
  // 点击切换核心状态类和颜色类
  $btn.on('click', function() {
    $(this).toggleClass('is-active teal');
  });
  
  // hover时根据状态切换颜色类
  $btn.on('mouseenter', function() {
    const $this = $(this);
    $this.toggleClass('teal', !$this.hasClass('is-active'));
  }).on('mouseleave', function() {
    const $this = $(this);
    $this.toggleClass('teal', $this.hasClass('is-active'));
  });
});

说明 #

1. 用is-active作为唯一核心状态标记，所有样式逻辑围绕这个类展开，删除冗余的clicked类；
2. CSS通过类与伪类的组合控制透明度，无需!important强制覆盖（选择器权重已足够匹配Fomantic默认样式）；
3. JS逻辑简化为：点击时同步切换激活状态和颜色类；hover时根据当前激活状态自动添加/移除teal类，离开时反向操作；
4. 完全复用Fomantic原生.teal类，没有硬编码颜色，符合你的限制要求。

这个方案遵循前端"状态驱动样式"的规范，逻辑清晰且易于维护，是专业开发者面对此类需求的常规思路。

内容的提问来源于stack exchange，提问作者thothal