css 去色_css按钮点击改变颜色

css 去色_css按钮点击改变颜色有这么一个样式,可以在你实现无色和加色之间游刃有余。网站设计师在设计网页时,有时将一块图片设计成灰色,鼠标移上去,图片就有颜色。一般的逻辑是做两张图片,然后在鼠标上做图片切换事件。当然这种方法可以完美是实现, 不过有个小瑕疵,就是你要切一倍的图片(有色+无色)。下面介绍样式实现,可以减少一倍量的工作哦。//HTMLCSS.grayscaleimg{filter:g

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用
有这么一个样式,可以在你实现无色和加色之间游刃有余。

网站设计师在设计网页时,有时将一块图片设计成灰色,鼠标移上去,图片就有颜色。一般的逻辑是做两张图片,然后在鼠标上做图片切换事件。当然这种方法可以完美是实现, 

不过有个小瑕疵,就是你要切一倍的图片(有色 + 无色)。下面介绍样式实现,可以减少一倍量的工作哦。

// HTML
<a href=”#”><img alt=”" src=”demo.jpg” /></a>

CSS
.grayscale img{filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: url(“data:image/svg+xml;utf8,<svg xmlns=\’http://www.w3.org/2000/svg\’><filter id=\’grayscale\’><feColorMatrix type=\’matrix\’ values=\’0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\’/></filter></svg>#grayscale”); filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(1);}
.grayscale:hover img{-webkit-filter: grayscale(0); -moz-filter: grayscale(0); -ms-filter: grayscale(0); -o-filter: grayscale(0);
filter:url(“about:blank”);
filter: grayscale(0); filter: rgb; }

JS
<script type=”text/javascript” src=”http://code.jquery.com/jquery-1.9.1.js”></script>
<script type=”text/javascript”>
$(document).ready(function() {
$(‘a’).hover(function() {
$(this).removeClass(‘grayscale’)
}, function() {
$(this).addClass(‘grayscale’)
});
});
</script>

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/185310.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • [JSP][JSTL]页面调用函数–它${fn:}内置函数、是推断字符串是空的、更换车厢

    [JSP][JSTL]页面调用函数–它${fn:}内置函数、是推断字符串是空的、更换车厢

    2022年1月1日
    52
  • 如何用C语言实现【简易关机程序】[通俗易懂]

    如何用C语言实现【简易关机程序】[通俗易懂]C语言初阶、有趣的代码

    2022年7月22日
    18
  • 采用虚拟存储技术_虚拟存储管理

    采用虚拟存储技术_虚拟存储管理虚拟存储技术(VIRTUALMEMORY)所谓的虚拟存储技术是指:当进程运行时,先将其一部分装入内存,另一部分暂留在磁盘,当要执行的指令或访问的数据不存在内存中时,由操作系统自动完成将它们从磁盘调入内存的工作。虚拟地址空间—–分配给进程的虚拟内存虚拟地址—–在虚拟内存中指令或数据的位置,该位置可以被访问,仿佛它是内存的一部分。

    2022年9月26日
    4
  • linux安装redis 完整步骤

    linux安装redis 完整步骤最近在linux服务器上需要安装redis,来存放数据,增加用户访问数据的速度,由于是第一次安装,于是在百度上搜了一篇文章,按照这篇博客,顺利安装好了,因此将博主的文章拷过来记录一下,方便以后使用,也为需要的朋友提供一个方便,参考博文地址:https://www.cnblogs.com/lauhp/p/8487029.html安装:1.获取redis资源  wgethttp://download…

    2022年6月28日
    32
  • 你的Wi-Fi 还安全吗?全球重大漏洞WPA2 KRACK 详细分析报告

    你的Wi-Fi 还安全吗?全球重大漏洞WPA2 KRACK 详细分析报告近日,Wi-Fi加密协议被曝光存在重大安全漏洞,用于保护Wi-Fi网络安全的WPA2安全加密协议已被黑客破解。这种被称作“Krack”(密钥重装攻击)攻击意味着用户连接的绝大多数Wi-Fi已经不安全了,包括家中的路由器Wi-Fi,都存在被盗号的风险。攻击者可通过此漏洞获取万能密钥来访问WPA2网络,从而窃听用户的通讯信息。究竟这个漏洞是由哪些缺陷引起的?会对用户造成什么影响?作为技术人的我们,又…

    2022年5月4日
    50
  • 分布式微服务架构的优缺点_单体架构和微服务架构

    分布式微服务架构的优缺点_单体架构和微服务架构单体架构、分布式架构、微服务优缺点单体架构特点?简单方便,高度耦合,扩展性差,适合小型项目。eg:学生管理系统。分布式架构特点?松耦合,扩展性好,但架构复杂,难度大。适合大型互联网项目,eg:京东、淘宝微服务:一种良好的分布式架构方案*优点:拆分粒度更小、服务更独立、耦合度更低*缺点:架构非常复杂,运维、监控、部署难度提高…

    2025年5月26日
    4

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号