css中鼠标移入时显示图片

时间2023-10-22 03:32:03发布访客分类CSS浏览584

导读：在CSS中，可以通过:hover伪类实现鼠标移入时显示图片，代码如下：img{ opacity: 1; /* 图片默认完全显示 */ transition: all 0.3s ease-in-out; /* 添加渐变效果 */}img:...

在CSS中，可以通过:hover伪类实现鼠标移入时显示图片，代码如下：

img{
      opacity: 1;
     /* 图片默认完全显示 */  transition: all 0.3s ease-in-out;
 /* 添加渐变效果 */}
img:hover{
      opacity: 0.5;
 /* 鼠标移入时图片透明度变为50% */}

在以上代码中，我们将图片的透明度默认设置为1，即完全不透明。当鼠标移入时，将图片的透明度设为0.5，这样图片就会变得更加透明。同时，我们使用了transition属性，使透明度变化过程中有一个渐变的过程，从而更加平滑自然。

这只是一个简单的示例，我们还可以将鼠标移入时显示的东西拓展到很多方面，比如背景色、边框、整个响应区域等等，通过此方法实现更加丰富的效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！