在CSS中,可以通过:hover伪类实现鼠标移入时显示图片,代码如下:
img{ opacity: 1; /* 图片默认完全显示 */ transition: all 0.3s ease-in-out; /* 添加渐变效果 */ } img:hover{ opacity: 0.5; /* 鼠标移入时图片透明度变为50% */ }
在以上代码中,我们将图片的透明度默认设置为1,即完全不透明。当鼠标移入时,将图片的透明度设为0.5,这样图片就会变得更加透明。同时,我们使用了transition属性,使透明度变化过程中有一个渐变的过程,从而更加平滑自然。
这只是一个简单的示例,我们还可以将鼠标移入时显示的东西拓展到很多方面,比如背景色、边框、整个响应区域等等,通过此方法实现更加丰富的效果。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。