CSS实现鼠标点击改变图片透明度功能

这篇文章主要介绍“CSS实现鼠标点击改变图片透明度功能”，在日常操作中，相信很多人在CSS实现鼠标点击改变图片透明度功能问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”CSS实现鼠标点击改变图片透明度功能”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

创新互联于2013年创立，先为南阳等服务建站，南阳等地企业，进行企业商务咨询服务。为南阳企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

很多时候在网站图片处理上需要实现一些辅助效果，比如鼠标在图片上滑动时或点击时改变图片颜色（变灰或者其他），其实一个简单的办法就是改变图片css透明度属性。

如何改变呢？一种是纯css，一种使用jquery或者javascript代码控制。第一种使用:hover伪类选择器，本示例使用第二种。

先看最后效果：

第一步：放置图片 

XML/HTML Code复制内容到剪贴板

1.   

2.       

3.   

4.           

  

5.       

6.   

7.           

  

8.       

9.   

10.           

  

11.     

这里每张图片先默认设置一个class选择器imgopacity（默认图片未选中，显示为淡灰色）

第二步：设置图片

css样式如下： 

CSS Code复制内容到剪贴板

1. .imgopacity   

2.   {   

3.       filter: alpha(opacity=50);   

4.       -moz-opacity: 0.5;   

5.       -khtml-opacity: 0.5;   

6.       opacity: 0.5;   

7.   }   

8.   ul li   

9.   {   

10.       list-style-type: none;   

11.   }   

上述css样式中0.5为图片透明度属性值，值范围：0—1，值越大图越清晰

此刻效果如下：

css默认透明度（即淡灰色）

第三步：编写jquery代码点击式控制图片透明度

当鼠标点击某一张图片时，将该图片正常显示，其他图片变成淡灰色。

由于默认图片有一个class选择器imgopacity代表淡灰色，即当我们鼠标点击该图片时删除该class即可正常显示该图片，代码如下：

JavaScript Code复制内容到剪贴板

1. $(function () {   

2.             $("#test img").click(function () {   

3.                 $("#test img").addClass("imgopacity");   

4.                 $(this).removeClass("imgopacity");   

5.             })   

6.         });   

7.   

最终效果如下：

到此，关于“CSS实现鼠标点击改变图片透明度功能”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！

本文题目：CSS实现鼠标点击改变图片透明度功能
URL分享：http://scjbc.cn/article/ggiojg.html