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

发布时间:2021-08-10 23:37:24 作者:chen
来源:亿速云 阅读:486

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

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

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

先看最后效果:

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

第一步:放置图片 

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-typenone;   

  11.   }   

上述css样式中0.5为图片透明度属性值,值范围:0&mdash;1,值越大图越清晰

此刻效果如下:

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

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

推荐阅读:
  1. 鼠标滑过改变图片
  2. css如何实现鼠标经过图片超链接时改变图片的大小

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css

上一篇:css怎么制作透明三角形

下一篇:CSS怎么解决页面图片水平垂直居中问题

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》