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

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

html代码

<div class="img">
	<img src="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;
}