文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何使图标在单击后保持更改状态。使用css

要使图标在单击后保持更改状态，可以使用CSS中的伪类和状态选择器来实现。

首先，可以使用伪类选择器:active来为被点击的图标应用样式。该伪类表示元素处于活动状态，即在用户按下鼠标按键时。可以为该伪类选择器添加样式，例如改变图标的颜色或背景色。

接下来，要使图标保持更改的状态，可以借助JavaScript来实现。可以通过为图标元素添加一个类，并在点击事件中切换该类来实现状态的更改。

以下是一个示例代码，展示如何使用CSS和JavaScript来使图标在单击后保持更改状态：

HTML代码：

代码语言：txt
复制
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <i class="icon"></i>

  <script src="script.js"></script>
</body>
</html>

CSS代码（styles.css）：

代码语言：txt
复制
.icon {
  /* 初始状态的样式 */
  color: black;
}

.icon:active {
  /* 点击后的样式 */
  color: red;
}

JavaScript代码（script.js）：

代码语言：txt
复制
var icon = document.querySelector('.icon');

icon.addEventListener('click', function() {
  icon.classList.toggle('active');
});

在上面的示例中，初始状态下图标的颜色为黑色。当用户点击图标时，通过JavaScript的classList属性和toggle方法来切换图标元素的类。在CSS中，可以使用新添加的类名来定义被点击后的样式。

这样，当用户点击图标时，图标的颜色会切换为红色，并保持这个更改的状态。再次点击图标时，会切换回初始状态。

请注意，这只是一个简单的示例，实际应用中可能需要根据具体情况进行调整和扩展。另外，推荐使用腾讯云相关产品中与前端开发和云计算相关的服务，以便在开发和部署过程中获得更多的支持和便利，具体产品和链接地址可以参考腾讯云官方文档或咨询腾讯云的技术支持团队。

相关搜索:如何使覆盖在单击前保持隐藏状态HTML CSS -使图标在单击时更改颜色(如链接)如何使单选按钮在刷新后保持选中状态如何使按钮在释放后仍保持选中状态？如何保持:单击元素后的活动css样式在单击按钮后，使TextBox中的选定文本保持选中或聚焦状态如何在单击表单按钮后使其保持选中状态？如何使仍处于活动状态的元素在刷新后仍保持活动状态？如何使:在搜索栏中单击/焦点后悬停外观保持不变单击后保持菜单项在onclick处于活动状态qTip2提示在单击后保持打开状态如何在不悬停鼠标和单击操作的情况下使下拉图标保持显示状态使用“切换”在单击时更改图标如何使文本在单击按钮后更改颜色，并在几秒钟未单击后重新更改颜色？在div上单击后通过jquery更改css如何使用css在contact form7中更改单击时的图标颜色如何使使用toggleClass显示表格在单击表中的按钮时保持打开状态？如何使带有<input>的<label>及其文本在单击时保持活动状态在悬停和单击时更改块颜色(并保持活动状态)Ant设计折叠面板在状态更改后保持打开
相关搜索:
页面内容是否对你有帮助？
有帮助
没帮助

相关·内容

如何在 Ubuntu 22.04 上安装 SFTPGo？

SFTPGo 应该已经使用默认配置运行并配置为在启动时自动启动，使用以下命令检查其状态：systemctl status sftpgo完成 SFTPGo 安装现在，打开您的 Web 浏览器并使用 URL...在 SFTPGo WebAdmin UI 中，单击“文件夹”，然后单击“+”图标。创建一个名为“S3private”的文件夹。...或者，您可以限制共享的使用次数，使用密码保护共享，通过源 IP 地址限制访问，设置自动到期日期。图片然后从共享列表中，选择您刚刚创建的共享并单击“链接”图标。...图片SFTPGo 使用优秀的 SB Admin2主题。如果您想对主题进行一些小的更改，您可以设置“extra_css”以指向您的自定义 CSS 文件的路径。...更改配置文件后，您需要重新启动 SFTPGo 服务以应用更改。

4K02

    • 我至今没想到，我也能在 CSS 中实现 SVG 动画了

    本篇文章我们就来一起学习学习如何在 CSS 中实现 SVG 动画。 开篇：CSS 与 SVG 相关核心概念 在实践动画之前，你需要了解 svg 的内部工作原理。...在这个样式中，我们设置了 元素的大小，并更改光标类型以表明它是可单击的。但是要设置线条的颜色和粗细，我们将使用 stroke和stroke-width 属性。...transition 属性 transition 属性告诉浏览器在两种不同状态的 CSS 属性之间平滑过渡。...不过，在矢量图像编辑软件中创建的 SVG 图标不太可能使用相对单位。无论包含图标的SVG 元素的宽高比如何，我们都希望确保图标的宽高比得到维护。...因此，为了使这种级别的控制成为可能，我们将使用 viewBox 属性。 在本例中，我将其转换为 100 x 100 像素的 viewBox。 让我们确保图标居中并且大小合适。

    1.3K10

    如何在Mac上轻松更改Finder的外观

    在Finder中隐藏各种元素 Finder在其窗口中显示各种项目，如侧栏，工具栏，路径栏和状态栏。这些选项使您可以快速跳转到Mac上的各个位置。...单击显示菜单，然后选择隐藏状态栏。你们都准备好了 在Finder中更改文件夹图标 Finder对所有文件夹使用相同的图标，但是您可以为所选文件夹更改此图标。...在Mac上准备好新文件夹图标，然后按照以下步骤更改文件夹的图标： 在预览中打开图像，单击编辑，然后选择复制。 右键单击要更改其图标的文件夹，然后选择“获取信息”。...在Finder中更改默认查看模式 Finder提供了四种模式来查看文件，您可以通过单击工具栏中的图标来切换到任何模式。...自定义项目在Finder窗口中的显示方式 您可以使用多个选项来更改文件夹，其图标，文本样式和其他元素在Finder中的显示方式。

    6.1K00

    scetch入门 第3部分：符号和导出谢谢阅读！

    在继续前进之前赶上第1部分和第2部分！ 符号 符号非常适合组织您经常重复使用的设计元素。在这个例子中，让我们将袜子猴子图标变成符号。选择图标后，查看顶部菜单栏并选择“创建符号” ?...创建符号 单击此项后，将在检查器中打开一个文本字段。我将这个符号命名为“Sock Monkey”。 ? 名称符号袜子猴子 请注意图层调色板中的文件夹图标如何从蓝色变为紫色。这意味着它是一个象征！ ?...您对其中的任何更改都将应用于该符号的所有其他实例。例如，如果您调整其中一个符号的大小，则另一个符号也会调整大小。 ? 调整符号大小。 提醒：在调整边框时按住移位以在调整大小时保持原始比例。...现在，让我们学习如何分离符号。我们希望调整顶级猴子图标的大小，而不会影响其他任何一个。为此，我们必须右键单击顶部猴子并选择“从符号中分离” ?...水平分布 现在我们可以安全地使这个图标更大，而不会影响任何其他符号。请注意，文件夹颜色再次变为蓝色： ? 文件夹颜色再次变为蓝色。 请记住将此图标与画板的中心对齐！

    1K00

    「Adobe国际认证」Adobe Photoshop变换对象教程

    按比例缩放图层 现在，当变换任意图层类型时，拖动角手柄默认情况下会按比例缩放图层，这是由选项栏中处于“开”状态的保持长宽比按钮（链接图标）来指示的。...要将默认的变换行为更改为不按比例缩放，只需关闭保持长宽比按钮（链接图标）即可。现在，按下 Shift 键可用作保持长宽比按钮的切换开关。...如果“保持长宽比”按钮处于“开”状态，按下 Shift 键则会处于“关”状态，反之亦然。...但是，您可以使用选项栏中的参考点定位符更改参考点，或者将中心点移到其它位置。 选取一个变换命令。图像上会出现外框。 默认情况下，参考点处于隐藏状态。...3.执行下列操作之一： 在选项栏中单击参考点定位符 上的方块。每个方块表示外框上的一个点。例如，要将参考点移动到外框的左上角，请单击参考点定位符左上角的方块。 在图像中出现的变换外框中，拖动参考点 。

    3K40

    一步步教你用CSS添加SVG过滤器

    然后创建另一个过滤器，使菜单显示为水斑点，它们会稍微粘在一起，但会随着它们向远处移动而分开。这也是为了和特定页面的主题保持一致，并展示了将 SVG 过滤器用于其他内容的两种创造性方法。...更改 h2 样式 ? 替换 h2 以引入一些动画 之前在步骤 4 中添加了 h2 样式。使用下面这段新代码替换旧代码，这段代码将为标题添加四秒的 CSS 动画。动画停止会停留在最后一个关键帧上。...使菜单工作 当菜单打开时，菜单图标被设置为不可见。然后创建每个菜单项的悬停元素，以便当用户将鼠标悬停在上面时进行更改。当菜单项返回其原始位置时，菜单的每个子项都会有 0.4 秒的变换时间。...添加菜单图标 ? 更改菜单图标的 z-index 以将其置于顶部 通过更改其 z-index，菜单图标高于其他元素。...当用户将鼠标悬停在菜单上时，菜单会滑出，单击菜单后其上的三条横线会变为 “X”，表示收起菜单。

    2.9K20

    scetch入门 第2部分：文本，对齐和SVG在第3部分中了解如何导出文件

    导入向量 让我们学习如何导入矢量文件并进行编辑。我在The Noun Project下载了Will Deskins设计的可爱猴子图标。点击这里直接下载SVG。...下载并解压缩SVG文件后，将其直接拖到Sketch画板中。 ? 将SVG拖动到画板 选中图标后，让我们在屏幕左侧的“图层”菜单中进行一些调查。...保持移位可确保图像的比例与原始比例一致。 使用画板 接下来我们要做的是更改画板的名称。现在它说“肖像 - 5 / 5S / 5C”，但我们想要更具体的东西，因为这将成为导出的PNG文件的名称。...右键单击图层窗口中的画板，然后选择“复制”。或者在选择画板的情况下使用快捷键⌘+ D（提示：这也适用于图层！）。 ? 复制画板 Sketch将在原始右侧创建一个复制画板。...应用风格 如您所见，已应用“Sock Monkey”样式，将我们的图标从蓝色更改为黄色。 在第3部分中了解如何导出文件 原文:http://megumi.co/learn/sketch2.htm

    4.1K30

    IntelliJ IDEA 2024.1 更新亮点汇总：全面提升开发体验

    重命名重构嵌入提示 为了使重命名过程更容易、更直观，我们实现了一个新的嵌入提示，该提示出现在更改的代码元素之上。要将代码库中的所有引用更新为新版本，您只需单击此提示并确认更改即可。...此外，您现在可以锁定 X 射线功能，确保即使在释放按键后它仍保持活动状态Ctrl。...检查拉取/合并请求分支后，审阅模式会自动激活，并且粉色标记出现在装订线中，表示代码更改可供审阅。单击这些标记会显示一个弹出窗口，其中显示原始代码，以便您可以快速识别已更改的内容。...装订线图标可帮助您快速发起新的讨论，以及查看和隐藏现有的讨论。它们还提供了对评论的轻松访问，使评论、回复和反应变得容易。在我们的博客文章中了解有关此更改的更多信息 。...Git工具窗口 中 CI 检查的状态 我们在Git工具窗口的*“日志”*选项卡 中引入了一个新列，使您可以轻松查看 CI 系统执行的 GitHub 提交检查的结果。

    3.2K10

    这11个新的Figma隐藏技巧，大幅提升你的设计效率

    3.整理 在 Figma 中工作的挑战之一是保持你的设计有条理和整洁。幸运的是，Figma 有一个有用的 Tidy Up 功能，可以帮助您快速轻松地清理您的设计。...使用 Tidy Up 就是使用键盘快捷键 [⌃] + [⌥] + [T]。这使您无需使用鼠标即可快速整理设计。 您还可以单击位于对齐部分最右侧的属性面板中的整理图标。...首先，它使您的画布保持整洁有序，这使得四处移动、调整元素大小和导出屏幕变得更加容易。其次，它允许您快速检查设计的响应能力，因为您可以看到框架内的元素如何适应不同的屏幕尺寸。...9.选择嵌套对象 这使您可以快速轻松地选择画布上的对象，而不管它们在层次结构中的位置如何。 要使用此功能，请将光标悬停在要选择的对象上。...假设你想使用像“2.5”这样的行高值，而你不能使用 CSS 单位来设置它。但是，您可以改用百分比 (%)。这也允许您在不影响行高的情况下更改字体大小。

    4.7K51

    ios应用列表调整后排名规则

    因此，应用程序可以顺利进行审查，也可以在正式运行后避免给用户带来恶劣的应用体验，提高应用程序的销售和下载。 开发人员需要熟悉iOS人用互动指南和AppStore审查指南。保持冷静，认真解释这些文件。...下载和安装描述文件后。可以存档在Xcode中。下面是Xcode中的配置更改。 Bundle Identifier将其更改为您描述文件所指定的APP ID。 设置代码签名。释放这个是选择你的分发证书。...完成APP元数据提交后，开发人员将看到有关APP的概述信息，然后单击“查看详细信息”按钮，然后在右上角单击“准备下载二进制”。完成系统提出关于APP的问题后。系统会建议您准备上传二进制文件。...此时，APP的状态变成“等待上传”。 5、上传和进制文件。 开发人员需要在真实设备上为程序创建一个文件，并成功创建后。在列表中选择档案，然后右键单击“分发”。在显示的图像中。...程序上传完成后。此时。APP已成为“等待审查”状态。 在提交应用程序之前，开发人员应该明白AppStore的审查仅相当于门守护者而不是法官。

    43910

    ios应用列表调整后排名规则

    因此，应用程序可以顺利进行审查，也可以在正式运行后避免给用户带来恶劣的应用体验，提高应用程序的销售和下载。 开发人员需要熟悉iOS人用互动指南和AppStore审查指南。保持冷静，认真解释这些文件。...下载和安装描述文件后。可以存档在Xcode中。下面是Xcode中的配置更改。 Bundle Identifier将其更改为您描述文件所指定的APP ID。 设置代码签名。释放这个是选择你的分发证书。...完成APP元数据提交后，开发人员将看到有关APP的概述信息，然后单击“查看详细信息”按钮，然后在右上角单击“准备下载二进制”。完成系统提出关于APP的问题后。系统会建议您准备上传二进制文件。...此时，APP的状态变成“等待上传”。 5、上传和进制文件。 开发人员需要在真实设备上为程序创建一个文件，并成功创建后。在列表中选择档案，然后右键单击“分发”。在显示的图像中。...程序上传完成后。此时。APP已成为“等待审查”状态。 在提交应用程序之前，开发人员应该明白AppStore的审查仅相当于门守护者而不是法官。

    57810

    Power Query 真经 - 第 1 章 - 基础知识

    （译者注：让查询步骤使用英文而不是中文是操作 Power Query 的最佳实践，其原因在于该英文信息含有的过去式形态可以提示用户此步骤是完成后的状态，同时该步骤的英文名称往往与此步骤所用的 M 函数相关...本书后续内容均保持查询步骤使用英语以便理解最佳实践，当然这不是必须的，在查询步骤中使用本地化语言，如：中文对 Power Query 的使用没有任何影响，取决于个人习惯。）...在【应用的步骤】窗口中选择它后，预览结果就会显示 Power Query 对其提取的原始数据的最原始状态，如图 1-7 所示。...是否必须使用这个步骤的名称呢？不是的，虽然通常鼓励用户让步骤保持不变，并学习是哪些用户界面命令生成的这些步骤，但如果想做出一些更改，也是可以重命名它们的，如下所示。...如果需要，可以在这里进行更改。 单击【确定】关闭对话框。 如果新旧数据有显著差异，将在预览窗口中立即看到它们的改变。但在这个案例中，两个文件内容看起来是完全一样的。那么，如何判断这种更改是否有效呢？

    5.1K31

    博途多用户操作

    ，还可以在检入前选择是否进行编译，编译方式可选择“设备软件（仅更改）”或是“标记的对象（仅更改）”， 为了记录更改状态，可以在注释栏输入所做的更改情况，单击 “开始检入” 按钮进行检入，如果有冲突对象需要确认是否继续检入...检入成功 6.4、刷新本地会话 其他用户更改和检入的对象在本地会话中的对象状态图标上标记为 （见表 1），如果希望将这些对象从其他用户转移到本地会话，需要刷新本地会话，通过工具栏刷新会话图标 （见表...刷新成功 6.5、打开/关闭服务器项目视图 不支持在本地会话中标记和检入的对象，可以直接在服务器项目视图中编辑，通过工具栏按钮 来打开或关闭服务器项目视图，当打开服务器项目视图后，工具栏中的服务器状态图标变为锁定状态...导出单用户项目 6.7、离线运行 如果暂时无法与服务器建立连接，可以临时使用离线运行模式（TIA Portal V15及以上版本支持），勾选“离线运行”后工具栏中服务器状态图标由绿色变为灰色，当重新与服务器建立连接后...但是，此切换仅在会话关闭之前保持活动状态。重新打开本地会话时，将再次使用 TIA Portal 设置中的默认设置，如下图 30 所示。 图30.

    5.7K22

    Amphetamine for Mac 下载：保持您的Mac不休眠

    在使用Amphetamine for Mac 时，屏幕常常保持开启状态，防止在最需要它时关闭或睡眠。...使用Amphetamine for Mac非常容易。安装完成后，单击状态栏图标以打开偏好设置，并在其中选择药品的应用程序选项。用户还可以为特定应用程序或时间段配置药品。...软件不会干扰计算机的常规操作，但可以确保它在需要时保持开启。3.全面的选项。Amphetamine for Mac允许用户在电脑休眠之前保持其警觉状态。...如果用户仅想要保持屏幕开启，而不是整个计算机，Amphetamine for Mac也允许用户进行此更改。使用屏幕保存选项，只需使显示器保持唤醒状态，而不会影响整个计算机。...图片总之，Amphetamine for Mac是一款非常好用的软件，它允许计算机在使用时保持唤醒状态，使得即使在使用计算机时屏幕及计算机自动进入睡眠模式，也不会因此中断工作流程。

    1.3K30

    iCollections for mac 8.0.6.80608 保持Mac桌面的整洁

    应用介绍iCollections允许您在桌面上创建区域，以便您可以排序和排列图标。这可以帮助您将相关项目保持在一起，以便文件（图片，文档，屏幕截图，应用程序等）井井有条且易于查找。...小麦测试可以按照自己需要创建各类工具栏哦支持以下几类栏目：网格视图快速菜单（选项+单击一个项目）从不隐藏模式减少项目间空间（较厚的物品包装）全屏检测器可防止收藏集显示全屏应用拖放改进3D收藏架清空垃圾桶之前不要显示警告隐藏工具栏将其从窗口中删除...，从而增加集合的大小iCollections是一个经过专业设计的应用程序，可帮助您保持Mac桌面的有序状态。...将macOS系统图标更改为自己的图标将任何macOS系统图标交换为您最喜欢的图标。无限制-使用任何图片文件更改任何文件，文件夹，应用程序，别名，磁盘驱动器或URL链接的图标。日历在桌面上查看日历窗口。...单击日期单元格后将显示事件描述。设计收藏每个集合都可以在外观设置中以易于识别的样式进行自定义。快速更改集合的外观以适合您的需求。应用监控应用程序监视器显示当前正在运行的进程（应用程序）。

    2.3K30

    【Java 进阶篇】深入了解 Bootstrap 按钮和图标

    Bootstrap 提供了一系列按钮样式，使按钮看起来更漂亮、一致且易于使用。这些按钮样式包括不同的颜色、尺寸和状态。...激活状态按钮 Bootstrap 还提供了按钮的激活状态，当按钮被点击后，可以显示为被激活状态。...以下是一个示例，展示如何更改图标的颜色： 在这个示例中，我们添加了 text-danger 类，将图标的颜色更改为红色。...以下是一个示例，展示如何更改图标的大小： 在这个示例中，我们使用了内联样式来定义图标的大小，2rem...以下是一个示例，展示如何使用 Font Awesome 图标库中的自定义图标： 首先，在页面的 部分引入 Font Awesome 图标库： <link rel="stylesheet"

    27830

    SceneKit 场景编辑器-为您的AR体验构建3D舞台

    您可以通过单击并用一根手指拖动来更改视角。要在保持相同角度的同时调整视图，请用两根手指滚动。您可以通过捏住触控板或选项+向上和向下滚动鼠标来放大设计。 操纵器 如果选择模型，现在可以看到操纵器。...在地球上，我们在顶部添加了另一层，即白云。 2k地球云 排放前后 这是在应用发射图之前​​和之后。 发射前的地球 自定义模型 现在我们已经了解了场景编辑器的方法，我们如何使自己成为自定义模型？...转到“ 材质”检查器，在“ 属性”部分中，将“ 着色”更改为“ Blinn”。然后，单击“ 漫反射”。在调色板窗口的底部，有一个颜色选择器图标。...我们不是试图在这里复制完美的手表，而只是学习如何使用基本形状组装物体。 平面颜色 让屏幕变黑，就像手表处于非活动状态一样。...转到“ 材质”检查器，将“ 着色”更改为“ Blinn”，单击“ 漫反射”时，使用颜色选择器从Apple网站中选择图像手镯中的颜色。

    5.6K20

    Excel编程周末速成班第18课：使用用户窗体创建自定义对话框

    在用户窗体处于活动状态时，显示工具箱，包含可放在窗体上的各种控件的图标以及一个箭头图标，当你要使用该窗体上的现有控件时可以选择它们。 属性窗口显示当前所选对象的属性。...然而，显示窗体后，更改代码中的这些属性将移动窗体。 ?...一个示例是创建用户窗体向用户显示有关程序使用的指令，然后希望在用户处理另一窗体时保持该用户窗体的显示状态。 窗体方法 UserForm对象具有一些方法。表18-3中描述了你可能需要的内容。 ?...3.单击该窗体将其激活。然后，在工具箱中，单击“命令按钮”图标。 4.通过在窗体中拖动将按钮放置在所需位置。...3.用户窗体在屏幕上的位置是相对于哪一点进行测量的？ 4.模态形式和非模态形式之间有什么区别？ 5.当你的程序使用完窗体后，如何销毁该窗体？

    11.1K30

    您不想错过的IntelliJ IDEA十大插件

    Key Promoter X将训练您如何使用它们。就像执着细致的教练一样，当您单击IDE内的某个元素时，它将显示带有相关快捷方式的工具提示。...一段时间后，您会发现您下意识地为自己节省了一次单击并使用了必要的快捷方式。 ? Maven Helper 如果您正在寻找用于处理Maven项目的其他操作，那么此插件是绝对必需的。...人们得到它主要是因为内联责备-该注释显示了谁在一行中更改了代码以及何时更改了代码。GitToolBox还添加了状态显示，自动获取等功能。 有超过500万开发者使用该插件来简化其日常Git工作流程。...默认情况下，它添加了IntelliJ IDEA不支持的一组图标。它们看起来很棒，并简化了文件之间的导航，因为您可以直观地识别它们的类型。最重要的是，这些图标是高度可定制的。...保持生产力，并使用IntelliJ IDEA享受乐趣！ Happy developing! ----

    1.8K50
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券