我们会遇到一种情境，这种情境是当正常打开一个页面，有文字配有图片，可是当鼠标的光标移动到这张图片上时，会显示另一张图片。这种效果应该怎么做？
在学习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>