当鼠标光标放在一张图片上，如何显示另一张图片？

小猫娃来啦

已于 2023-03-03 09:29:06 修改

阅读量6k

点赞数 12

分类专栏： Html 文章标签： html 前端 css 开发语言

于 2022-08-23 16:22:00 首次发布

本文链接：https://blog.csdn.net/dyk11111/article/details/126486875

版权

Html 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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

在学习html和css阶段的程序员，我们可以使用hover来对图片进行处理。

hover的基本意思为选择(当鼠标光标移动对一个对象进行选择)

1.我们在一个div里放两张照片

2.我们目的是想要第一张照片正常显示在页面，想要第二张照片在鼠标移动到第一张照片上显示出来

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>

小猫娃来啦

关注

12
点赞
踩
35

收藏

觉得还不错? 一键收藏
打赏
5
评论
当鼠标光标放在一张图片上，如何显示另一张图片？

我们会遇到一种情境，这种情境是当正常打开一个页面，有文字配有图片，可是当鼠标的光标移动到这张图片上时，会显示另一张图片。2.我们目的是想要第一张照片正常显示在页面，想要第二张照片在鼠标移动到第一张照片上显示出来。这个代码的意思就是当鼠标光标移动到这个div上时，不让第一张照片显示。以下，是我关于这个效果写的代码，大家可以复制到编辑器运行一下，加深印象。这个代码的意思就是当鼠标光标移动到这个div上时，让第二张照片显示。意思就是不将鼠标光标移动到第一张照片上时，不让第二张照片显示。5.对第二张照片设置。
复制链接

扫一扫