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

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

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

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

先看最后效果：

第一步：放置图片 

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

1. <ul id="test">  

2.       <li>  

3.           <img class="imgopacity" src="Images/1.jpg" /></li>  

4.       <li>  

5.           <img class="imgopacity" src="Images/2.jpg" /></li>  

6.       <li>  

7.           <img class="imgopacity" src="Images/3.jpg" /></li>  

8.   </ul>  

这里每张图片先默认设置一个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&mdash;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实现鼠标点击改变图片透明度功能”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！