css鼠标移到图片上图片由黑白变彩色

鼠标未移入是黑白的，鼠标移入是彩色的

html代码

<div class="img"><img src="data:images/2021120710515060092.png">
</div>

css代码：

.img>img {width: 300px;height: 200px;/* cursor: pointer; 鼠标移入 显示手指状 */cursor: pointer;/* filter: grayscale(100%); 将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0； */filter: grayscale(100%);transition: all 0.2s;
}.img>img:hover {filter: none;
}

css鼠标移到图片上图片由黑白变彩色相关推荐

css鼠标移过，给图片加高亮效果
效果如下:鼠标移过有个高亮的效果直接给img加类名 <img class="shower-hover" src="@/assets/image/card.png& ...
css改变鼠标图片大小,CSS实现鼠标经过图片上图片等比缩放效果（代码实例）
本篇文章给大家带来的内容是关于如何使用CSS实现鼠标经过图片上图片缩放(缓慢变化,有过渡效果,缩放的过程是有动画过渡的)效果,主要用到CSS transform属性,css3 transition属性 ...
CSS鼠标悬停图片上图片变灰变色半透明
CSS鼠标悬停图片上图片变灰变色半透明 DIV CSS鼠标移动悬停在图片上图片变色或半透明变化效果实现,CSS鼠标悬停图片上图片变灰.图片变色.图片半透明一.DIVCSS5介绍与说明: - ...
css怎样使鼠标移到div上显示手型
新建一个html文件,命名为test.html,用于讲解css怎样使鼠标移到div上显示手型. 在test.html文件内,创建一个div模块,下面将使用css设置该div的样式,实现鼠标移到div上 ...
css鼠标经过div1时div2消失,CSS_两个div叠加触发事件发生闪烁问题的解决方法，当鼠标移到div1上的时候，会出 - phpStudy...
两个div叠加触发事件发生闪烁问题的解决方法当鼠标移到div1上的时候,会出现div2.出现时div2在div1的上面,div2在出现后发生闪烁的问题. 于是开始找问题根源,发现原来是因为当我们触发 ...
html鼠标悬停填充表格,鼠标移到表格上时，鼠标所在行放大高亮显示【实例】...
本文给大家介绍一个比较有趣的CSS Table表格,当鼠标移到表格上时,鼠标所在行放大高亮显示. 鼠标所在行放大高亮显示 HTML代码html> Table V01 * { margin: 0p ...
css鼠标移至滚动条变粗
需求为:默认情况滚动条浅色且较细,用户将鼠标移至滚动条上则变成深色且加粗. 图1 原滚动条图2 鼠标hover后加粗变色 *::-webkit-scrollbar {width: 8px;heigh ...
css鼠标点在文字上背景透明,CSS实现文字半透明显示在图片上方法(示例代码)
CSS实现文字半透明显示在图片上方法在css中文字半透明我们会需要使用滤镜效果也就是css中的filter:alpha来实现了,下面来看两个文字显示在图片上并且半透明的例子. CSS让一行文字显示在 ...
html鼠标悬停多个图片变灰,怎样用CSS让鼠标悬停在图片上图片变灰
我们常常在网页中看到这样一种效果,当你的鼠标移动到图片上的时候,图片变灰,或者变暗,这实际是图片被CSS设置为半透明样式.下面就给大家做一个实例看一下这种效果怎么实现a:hover img{filte ...
鼠标放到图片上图片就变大
CSS3的transform:scale()可以实现按比例放大或者缩小功能. CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对 ...

css鼠标移到图片上图片由黑白变彩色

css鼠标移到图片上图片由黑白变彩色相关推荐

最新文章

热门文章