jQuery案例demo -- 鼠标移入显示蒙版
效果展示
HTML代码:
<ul id="fourth_tab"> <li> <img src="img/camera_green.png" alt="绿色相机" class="camera"> <p class="title"><span>摄影小白成长记</span></p> <p>The best preparation for tomorrow is doing your best today.</p> </li> <li style="background-color: red"> <div class="show_more"><a href="html/test.html">点击查看更多</a></div> <img src="img/bus.webp" alt="公交车"> </li> <li style="background-color: red"> <div class="show_more"><a href="html/test.html">点击查看更多</a></div> <img src="img/life.png" alt="落叶"> </li> </ul>
CSS代码:
#fourth_tab li{ position: relative; border-radius: 6px; } .show_more{ width: 100%; height: 100%; line-height: 230px; background-color: #9f594d; position: absolute; display: none; font-size: 22px; font-weight: bolder; letter-spacing: 4px; cursor: pointer; } .show_more a{ text-decoration: none; color: #fbfff9; }
Javascript代码:
$('#fourth_tab li').mouseenter(function(){ $(this).find('.show_more').slideDown(200); }); $('#fourth_tab li').mouseleave(function(){ $(this).find('.show_more').slideUp(200); });
个人笔记:
1.这里主要使用到jQuery的slideUp()、slideDown()函数
2.在js代码中,使用$(this)来做限制。鼠标移入第二张图片,那么这张图片上面显示蒙版,其他的图片不显示
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
使用Docker运行Java应用程序
使用Docker运行Java应用程序 部署软件混乱;需要克服许多问题才能生成顺畅且无痛的部署过程。诸如环境设置,依赖性地狱,编排管理以及系统可用性等问题是部署新应用程序时遇到的许多问题中的一小部分。 Docker可以给我们一种打破依赖性地狱问题的方法,也就是说,如果两个应用程序依赖于两个不同的Java版本,并且它们必须在同一主机上运行,那么将它们隔离到它们自己的docker环境中可能会有所帮助。Docker也可以用来声明性地构建你的依赖环境,能够运行你的应用程序并与外部世界进行通信。 Docker使用容器的想法。容器与虚拟机(VM)类似。但是,在虚拟机将自己隔离到拥有自己的操作系统时,容器将共享操作系统内核和其他主机资源。容器是轻量级的,并且允许应用程序在具有通用交互点集的任何主机上运行,从而可以轻松地复制和缩放应用程序。 安装Docker Docker在你的操作系统上运行一个守护进程。守护进程将成为当前主机或安装了docker的虚拟机上所有容器的编排器。 Docker适用于所有主要的操作系统发行版。如果运行Windows 10,则可以运行Docker for Windows。...
- 下一篇
C# 绘制PDF图形——基本图形、自定义图形、色彩透明度
引言 在PDF中我们可以通过C#程序代码来添加非常丰富的元素来呈现我们想要表达的内容,如绘制表格、文字,添加图形、图像等等。在本篇文章中,我将介绍如何在PDF中绘制图形,并设置图形属性的操作。 文章中将分以下要点进行介绍: 1. 绘制基本图形(线条、椭圆、圆形、矩形、三角形) 2. 绘制自定义图形 3. 绘制图形并设置图形透明度 所需工具:Spire.PDF for .NET 4.0 提示:安装后,直接引用安装路径下Bin文件夹中的dll文件到项目程序中即可。 【示例1】绘制基本图形 C# 步骤1:新建一个PDF文档,添加页,添加画笔、画刷 //新建一个PDF文档,添加页 PdfDocument doc = new PdfDocument(); PdfPageBase page = doc.Pages.Add(); //设置画笔和画刷 PdfPen pen = new PdfPen(PdfBrushes.Black, 1f); PdfBrush brush1 = PdfBrushes.RosyBrown; PdfBrush brush2 = PdfBrushes.Goldenrod...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
-
Docker使用Oracle官方镜像安装(12C,18C,19C)
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- CentOS8编译安装MySQL8.0.19
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- MySQL8.0.19开启GTID主从同步CentOS8
- CentOS7,8上快速安装Gitea,搭建Git服务器
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果
推荐阅读
最新文章
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- 设置Eclipse缩进为4个空格,增强代码规范
- Mario游戏-低调大师作品
- MySQL8.0.19开启GTID主从同步CentOS8
- Windows10,CentOS7,CentOS8安装MongoDB4.0.16
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果
- CentOS8编译安装MySQL8.0.19
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- SpringBoot2整合Redis,开启缓存,提高访问速度