当鼠标光标放在一张图片上,如何显示另一张图片?
如何 显示 图片 一张 光标 放在
2023-09-14 09:13:39 时间
我们会遇到一种情境,这种情境是当正常打开一个页面,有文字配有图片,可是当鼠标的光标移动到这张图片上时,会显示另一张图片。这种效果应该怎么做?
在学习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>
相关文章
- Netty(三) 什么是 TCP 拆、粘包?如何解决?
- SpringBoot:如何优雅地进行响应数据封装、异常处理?
- CSS实现背景图毛玻璃效果和如何保持图片上的文字显示正常
- Windows10-如何将此电脑和控制面板以及网络和用户的文件等,显示到桌面上快捷方式
- Oracle 视图 ALL_APPLY_CONFLICT_COLUMNS 官方解释,作用,如何使用详细说明
- 及实现Linux下如何实现共享内存?(linux共享内存原理)
- Oracle 视图 DBA_REDEFINITION_OBJECTS 官方解释,作用,如何使用详细说明
- 深入了解Linux系统:如何查看详细信息(linux显示详细信息)
- Oracle数据库中如何增加序列(oracle增加序列)
- 每周一贴:如何在优麒麟桌面上显示歌词
- 器Linux如何关闭显示器的指南(linux关闭显示)
- Linux系统如何关闭防火墙(关闭linux的防火墙)
- MySQL 学习笔记:如何在 SQL 命令行粘贴并运行 SQL 语句(mysql粘贴)
- Linux中文显示简易指南(linux如何显示中文)
- 如何解决 MySQL 中文字符无法正常显示的问题?(mysql中文不显示)
- 深入MySQL:如何显示表信息(mysql 显示表)
- 如何打开并显示Linux系统中的隐藏文件?(显示linux隐藏文件)
- 如何在 MySQL 中正确显示中文(mysql中中文显示)
- 如何利用MySQL实现一行显示(mysql 一行显示)
- 如何在MySQL中去除重复数据(mysql 不显示重复)
- MySQL表头丢失,如何解决(mysql 不显示表头)
- 如何解决MySQL数据库不显示汉字的问题(mysql 不显示 汉字)
- 一列Oracle如何将两列合并为一列(oracle 两列显示为)
- Jquery如何实现点击时高亮显示代码