我们会遇到一种情境，这种情境是当正常打开一个页面，有文字配有图片，可是当鼠标的光标移动到这张图片上时，会显示另一张图片。这种效果应该怎么做？
在学习html和css阶段的程序员，我们可以使用hover来对图片进行处理。
hover的基本意思为选择(当鼠标光标移动对一个对象进行选择)
1.我们在一个div里放两张照片
2.我们目的是想要第一张照片正常显示在页面，想要第二张照片在鼠标移动到第一张照片上显示出来
<div>
<img src="img1" alt="">
<img src="img2" alt="">
</div>
3.给第二张照片设置 div>img:last-child{display: none;}
意思就是不将鼠标光标移动到第一张照片上时，不让第二张照片显示
4.对第一张照片设置div:hover>img:first-child{display: none;}
这个代码的意思就是当鼠标光标移动到这个div上时，不让第一张照片显示
5.对第二张照片设置div:hover>img:last-child{display: block;}
这个代码的意思就是当鼠标光标移动到这个div上时，让第二张照片显示
这几步是利用hover做出我们想要的效果，最核心的几步，缺一不可。
以下，是我关于这个效果写的代码，大家可以复制到编辑器运行一下，加深印象。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div{
width: 500px;
height: 500px;
overflow: hidden;
}
div>img{
width: 100%;
height: 500px
}
div:hover>img:last-child{
display: block;
}
div:hover>img:first-child{
display: none;
}
div>img:last-child{
display: none;
}
</style>
</head>
<body>
<div>
<img src="https://img1.baidu.com/it/u=1966616150,2146512490&fm=253&fmt=auto&app=138&f=JPEG?w=751&h=500" alt="">
<img src="https://img2.baidu.com/it/u=2890830300,1721859624&fm=253&fmt=auto&app=120&f=JPEG?w=750&h=500" alt="">
</div>
</body>
</html>
